examples/container.zig

@@ -31,16 +31,15 @@ pub fn main() !void {
             .separator = .{ .enabled = false },
         },
         .layout = .{
-            .gap = 0,
             .padding = .all(5),
-            .direction = .horizontal,
+            .direction = .vertical,
         },
     });
     var box = try App.Container.init(allocator, .{
         .rectangle = .{ .fill = .blue },
         .layout = .{
             .gap = 1,
-            .direction = .vertical,
+            .direction = .horizontal,
             .padding = .vertical(1),
             .sizing = .{
                 // .width = .{ .fixed = 700 },

src/container.zig

@@ -417,10 +417,15 @@ pub fn Container(comptime Event: type) type {
                                     .cols = cols,
                                     .rows = size.rows,
                                 };
+                                // border
                                 if (sides.top) element_size.rows -= 1;
                                 if (sides.bottom) element_size.rows -= 1;
-                                offset += cols;
+                                // padding
+                                element_size.anchor.row += padding.top;
+                                element_size.rows -= padding.top + padding.bottom;
+                                // gap
                                 offset += gap;
+                                offset += cols;
                             },
                             .vertical => {
                                 var rows = element_rows;
@@ -436,10 +441,15 @@ pub fn Container(comptime Event: type) type {
                                     .cols = size.cols,
                                     .rows = rows,
                                 };
+                                // border
                                 if (sides.left) element_size.cols -= 1;
                                 if (sides.right) element_size.cols -= 1;
-                                offset += rows;
+                                // padding
+                                element_size.anchor.col += padding.left;
+                                element_size.cols -= padding.left + padding.right;
+                                // gap
                                 offset += gap;
+                                offset += rows;
                             },
                         }
 
@@ -452,10 +462,6 @@ pub fn Container(comptime Event: type) type {
                         }
 
                         // padding resizing
-                        element_size.anchor.row += padding.top;
-                        element_size.anchor.col += padding.left;
-                        element_size.rows -= padding.top + padding.bottom;
-                        element_size.cols -= padding.left + padding.right;
 
                         try element.handle(.{ .resize = element_size });
                     }