Equal height columns (#9577)

* changes

* add changeset

* add changeset

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/chilly-dragons-smoke.md

@@ -0,0 +1,7 @@
+---
+"@gradio/column": minor
+"@gradio/row": minor
+"gradio": minor
+---
+
+feat:Equal height columns

gradio/layouts/form.py

@@ -4,6 +4,7 @@
 
 from gradio.blocks import BlockContext, Blocks
 from gradio.component_meta import ComponentMeta
+from gradio.layouts.column import Column
 from gradio.layouts.row import Row
 
 if TYPE_CHECKING:
@@ -38,6 +39,13 @@ def add_child(self, child: Block):
             scale = getattr(child, "scale", None)
             self.scale += 1 if scale is None else scale
             self.min_width += getattr(child, "min_width", 0) or 0
+        elif (
+            isinstance(self.parent, Column)
+            and isinstance(self.parent.parent, Row)
+            and self.parent.parent.equal_height
+        ):
+            scale = getattr(child, "scale", None)
+            self.scale += 1 if scale is None else scale
         elif isinstance(self.parent, Blocks) and self.parent.fill_height:
             scale = getattr(child, "scale", None)
             self.scale += 0 if scale is None else scale

js/column/Index.svelte

@@ -17,7 +17,7 @@
 
 <div
 	id={elem_id}
-	class={elem_classes.join(" ")}
+	class="column {elem_classes.join(' ')}"
 	class:gap
 	class:compact={variant === "compact"}
 	class:panel={variant === "panel"}

js/row/Index.svelte

@@ -39,7 +39,7 @@
 	style:max-height={get_dimension(max_height)}
 	style:min-height={get_dimension(min_height)}
 	id={elem_id}
-	class={elem_classes.join(" ")}
+	class="row {elem_classes.join(' ')}"
 >
 	{#if loading_status && show_progress && gradio}
 		<StatusTracker
@@ -86,6 +86,12 @@
 		align-items: stretch;
 	}
 
+	.stretch > :global(.column > *),
+	.stretch > :global(.column > .form > *) {
+		flex-grow: 1;
+		flex-shrink: 0;
+	}
+
 	div > :global(*),
 	div > :global(.form > *) {
 		flex: 1 1 0%;