diff options
| -rw-r--r-- | packages/app/src/components/session/session-sortable-tab.tsx | 4 | ||||
| -rw-r--r-- | packages/app/src/pages/session.tsx | 2 | ||||
| -rw-r--r-- | packages/ui/src/components/tabs.css | 6 |
3 files changed, 8 insertions, 4 deletions
diff --git a/packages/app/src/components/session/session-sortable-tab.tsx b/packages/app/src/components/session/session-sortable-tab.tsx index aa8b179bb..06609fcfb 100644 --- a/packages/app/src/components/session/session-sortable-tab.tsx +++ b/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> ) } diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx index f12116c84..caa6d3ad1 100644 --- a/packages/app/src/pages/session.tsx +++ b/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" /> diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css index 8a872ebad..6b57f0c04 100644 --- a/packages/ui/src/components/tabs.css +++ b/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; |