testing(container): border separator test cases

Currently the test case with both a border and separators for two
children is failing to render the separators.

src/container.zig

@@ -98,6 +98,7 @@ pub const Border = packed struct {
 
         if (this.separator.enabled) {
             // calculate where the separator would need to be
+            // TODO: use the childrens size to determine the location of the separator instead?
             const gap = layout.gap + 1;
             const element_cols = blk: {
                 var cols = size.cols - gap * (len - 1);
@@ -228,6 +229,79 @@ pub const Border = packed struct {
             .cols = 30,
         }, &container, @import("test/container/border.horizontal.zon"));
     }
+
+    test "separator without gaps" {
+        const event = @import("event.zig");
+        const testing = @import("testing.zig");
+
+        var container: Container(event.SystemEvent) = try .init(std.testing.allocator, .{
+            .border = .{
+                .separator = .{
+                    .enabled = true,
+                },
+            },
+        }, .{});
+        try container.append(try .init(std.testing.allocator, .{}, .{}));
+        try container.append(try .init(std.testing.allocator, .{}, .{}));
+        defer container.deinit();
+
+        try testing.expectContainerScreen(.{
+            .rows = 20,
+            .cols = 30,
+        }, &container, @import("test/container/separator_no_gaps.zon"));
+    }
+
+    test "separator(2x) without gaps" {
+        const event = @import("event.zig");
+        const testing = @import("testing.zig");
+
+        var container: Container(event.SystemEvent) = try .init(std.testing.allocator, .{
+            .border = .{
+                .separator = .{
+                    .enabled = true,
+                    .color = .red,
+                },
+            },
+            .layout = .{
+                .direction = .vertical,
+            },
+        }, .{});
+        try container.append(try .init(std.testing.allocator, .{}, .{}));
+        try container.append(try .init(std.testing.allocator, .{}, .{}));
+        try container.append(try .init(std.testing.allocator, .{}, .{}));
+        defer container.deinit();
+
+        try testing.expectContainerScreen(.{
+            .rows = 20,
+            .cols = 30,
+        }, &container, @import("test/container/separator_2x_no_gaps.zon"));
+    }
+
+    test "separator(2x) with border(all)" {
+        const event = @import("event.zig");
+        const testing = @import("testing.zig");
+
+        // FIXME: without a gap this does not work as expected!
+        var container: Container(event.SystemEvent) = try .init(std.testing.allocator, .{
+            .border = .{
+                .color = .red,
+                .sides = .all,
+                .separator = .{
+                    .enabled = true,
+                    .color = .red,
+                },
+            },
+        }, .{});
+        try container.append(try .init(std.testing.allocator, .{ .rectangle = .{ .fill = .white } }, .{}));
+        try container.append(try .init(std.testing.allocator, .{ .rectangle = .{ .fill = .white } }, .{}));
+        try container.append(try .init(std.testing.allocator, .{ .rectangle = .{ .fill = .white } }, .{}));
+        defer container.deinit();
+
+        try testing.expectContainerScreen(.{
+            .rows = 20,
+            .cols = 30,
+        }, &container, @import("test/container/separator_no_gaps.zon"));
+    }
 };
 
 /// Rectangle configuration struct
@@ -332,9 +406,12 @@ pub fn Container(comptime Event: type) type {
                 for (this.elements.items) |element| {
                     size = size.merge(element.minSize());
                 }
+                var gap = this.properties.layout.gap;
+                if (this.properties.border.separator.enabled) gap += 1;
+
                 switch (this.properties.layout.direction) {
-                    .horizontal => size.cols += this.properties.layout.gap * (len - 1),
+                    .horizontal => size.cols += gap * (len - 1),
-                    .vertical => size.rows += this.properties.layout.gap * (len - 1),
+                    .vertical => size.rows += gap * (len - 1),
                 }
             }
             return .{