Change layout to Vertical instead of Grid.

idd.py

@@ -5,6 +5,7 @@
 from textual.app import App, ComposeResult
 from textual.reactive import Reactive
 from textual.widgets import Input
+from textual.containers import Horizontal, Vertical
 
 from diff_driver import DiffDriver
 
@@ -137,39 +138,45 @@ async def set_pregisters_command_result(self, state) -> None:
 
     def compose(self) -> ComposeResult:
         """Compose the layout of the application."""
+        with Vertical():
+            yield Header()
 
-        yield Header()
-
-        # Diff areas
-        yield self.diff_frames1
-        yield self.diff_frames2
-
-        yield self.diff_locals1
-        yield self.diff_locals2
-
-        yield self.diff_args1
-        yield self.diff_args2
-
-        yield self.diff_asm1
-        yield self.diff_asm2 
-
-        yield self.diff_reg1
-        yield self.diff_reg2
-
-        #yield self.executable_path1
-        #yield self.executable_path2
-
-        # Compose the view
-        yield self.base_command_bar
-        yield self.regressed_command_bar
-
-        yield self.diff_area1
-        yield self.diff_area2
-
-        yield self.parallel_command_bar
-        self.parallel_command_bar.focus()
-
-        yield Footer()
+            with Horizontal(classes="row1"):
+                yield self.diff_frames1
+                yield self.diff_frames2
+
+            with Horizontal(classes="row2"):
+                with Horizontal():
+                    yield self.diff_locals1
+                    yield self.diff_locals2
+                    yield self.diff_args1
+                    yield self.diff_args2
+
+                with Vertical():
+                    with Horizontal():
+                        yield self.diff_reg1
+                        yield self.diff_reg2
+                    with Horizontal():
+                        yield self.diff_asm1
+                        yield self.diff_asm2
+
+            #yield self.executable_path1
+            #yield self.executable_path2
+
+            with Horizontal(classes="row3"):
+                yield self.base_command_bar
+                yield self.regressed_command_bar
+
+            with Horizontal(classes="row4"):
+                yield self.diff_area1
+                yield self.diff_area2
+
+            with Horizontal(classes="row5"):
+                yield self.parallel_command_bar
+
+            self.parallel_command_bar.focus()
+
+            yield Footer()
 
     @on(Input.Submitted)
     async def execute_debugger_command(self, event: Input.Changed) -> None:

layout.tcss

@@ -1,25 +1,28 @@
 Screen {
-    layout: grid;
-    grid-size: 4 10;
+    layout: vertical;
+    height: 100%;
 }
 
 TextScrollView {
     border: solid green;
 }
 
-#diff-frames1, #diff-frames2 {
-    row-span: 2;
+.row1 {
+    height: 20%;
 }
 
-#diff-frames1, #diff-frames2, #base-command-bar, #regressed-command-bar {
-    column-span: 2;
+.row2 {
+    height: 30%;
 }
 
-#diff-area1, #diff-area2 {
-    column-span: 2;
-    row-span: 4;
+.diff-asm-reg {
+    height: 10%;
 }
 
-#parallel-command-bar {
-    column-span: 4;
+.row3, .row5 {
+    height: 6%;
+}
+
+.row4 {
+    height: 40%;
 }