From ec49ac0a4b8111acfa4374a9bd06f366f404cdc7 Mon Sep 17 00:00:00 2001
From: Charles Nykamp <16085675+cqnykamp@users.noreply.github.com>
Date: Wed, 3 Jun 2026 22:20:22 -0500
Subject: [PATCH] fix(ui): stretch NameBar in folder view flex column

The NameBar's `width: 100%` was enough to stretch it inside the editor's
HStack parent, but not inside the folder view's `<Flex flexDirection={{
base: "column", md: "row" }}>`. Adding `flex={1}` to the outer Box (both
read-only and editable branches) and the Editable lets the NameBar fill
the available row/column space in both flex contexts.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/app/src/widgets/NameBar.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/widgets/NameBar.tsx b/apps/app/src/widgets/NameBar.tsx
index 5d08a829e..2aee21a61 100644
--- a/apps/app/src/widgets/NameBar.tsx
+++ b/apps/app/src/widgets/NameBar.tsx
@@ -52,7 +52,7 @@ export function NameBar({
   if (!isEditable || contentId === null || !fetcher) {
     // Read-only header for root folder: icon sits inside the title box (non-editable)
     return (
-      <Box position="relative" maxWidth={maxWidth} width={width}>
+      <Box position="relative" maxWidth={maxWidth} width={width} flex={1}>
         <Show above="md">
           <Box
             position="absolute"
@@ -98,7 +98,7 @@ export function NameBar({
   }
 
   return (
-    <Box position="relative" maxWidth={maxWidth} width={width}>
+    <Box position="relative" maxWidth={maxWidth} width={width} flex={1}>
       <Show above="md">
         <Box
           position="absolute"
@@ -118,6 +118,7 @@ export function NameBar({
         value={name}
         width={width}
         maxWidth={maxWidth}
+        flex={1}
         fontWeight="bold"
         fontSize={fontSizeMode === "folder" ? "xl" : undefined}
         textAlign="left"