feat(tree): make left side of the tree only take as much space as necessary

src/elements.zig

@@ -59,6 +59,7 @@ pub fn Tree(App: type) type {
                 .ptr = this,
                 .vtable = &.{
                     .resize = resize,
+                    .minSize = minSize,
                     .handle = handle,
                     .content = content,
                 },
@@ -70,6 +71,19 @@ pub fn Tree(App: type) type {
             this.size = size;
         }
 
+        fn minSize(ctx: *anyopaque, model: *const App.Model, _: Point) Point {
+            // NOTE as we assume the model contents do not change we could calculate the
+            // maximum width required for this `Element` and return that, instead of
+            // calculating the width every time anew. For now this works fine.
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            const changes: []const Model.Index = model.changes.keys();
+            const files = changes[this.scrollback..];
+            var width: u16 = 0;
+            for (files) |file| width = @max(@as(u16, @intCast(file.len)), width);
+            return .{ .x = width };
+        }
+
+
         fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
             const this: *@This() = @ptrCast(@alignCast(ctx));
             switch (event) {
@@ -112,7 +126,6 @@ pub fn Tree(App: type) type {
                 const row_color: zterm.Color = if (this.idx == idx) .blue else .default;
                 cell_idx = row * size.x;
                 for (0..size.x) |_| {
-                    cell_idx += 1;
                     if (value_idx >= value.len) break;
                     const cp = value[value_idx];
                     defer value_idx += 1;
@@ -128,6 +141,7 @@ pub fn Tree(App: type) type {
                         else => cp,
                     };
                     cells[cell_idx].style.fg = row_color;
+                    cell_idx += 1;
                 }
             }
         }