fix(ui): add max-width 280px to tabs with text truncation

packages/app/src/components/session/session-sortable-tab.tsx

@@ -11,7 +11,7 @@ import { useLanguage } from "@/context/language"
 
 export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
   return (
-    <div class="flex items-center gap-x-1.5">
+    <div class="flex items-center gap-x-1.5 min-w-0">
       <FileIcon
         node={{ path: props.path, type: "file" }}
         classList={{
@@ -19,7 +19,7 @@ export function FileVisual(props: { path: string; active?: boolean }): JSX.Eleme
           "grayscale-0": props.active,
         }}
       />
-      <span class="text-14-medium">{getFilename(props.path)}</span>
+      <span class="text-14-medium truncate">{getFilename(props.path)}</span>
     </div>
   )
 }

packages/app/src/pages/session.tsx

@@ -2014,7 +2014,7 @@ export default function Page() {
                       <div class="sticky top-0 shrink-0 flex">
                         <Tabs.List>
                           <Show when={!layout.fileTree.opened()}>
-                            <Tabs.Trigger value="review">
+                            <Tabs.Trigger value="review" classes={{ button: "!pl-6" }}>
                               <div class="flex items-center gap-3">
                                 <Show when={diffs()}>
                                   <DiffChanges changes={diffs()} variant="bars" />

packages/ui/src/components/tabs.css

@@ -54,6 +54,7 @@
 
     white-space: nowrap;
     flex-shrink: 0;
+    max-width: 280px;
     border-bottom: 1px solid var(--border-weak-base);
     border-right: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
@@ -62,8 +63,11 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 14px 24px;
+      padding: 14px 24px 14px 12px;
       outline: none;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:focus-visible {
         outline: none;