diff options
| author | David Hill <[email protected]> | 2026-01-27 14:01:04 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-01-27 14:04:10 +0000 |
| commit | c68261fc067c148c3b986441f4173e4bcb6d3fa9 (patch) | |
| tree | 316a9418453a1fb32513515ece8811105bc53004 | |
| parent | 2d0049f0d9d20976543454cd9f844112eb8f1cd4 (diff) | |
| download | opencode-c68261fc067c148c3b986441f4173e4bcb6d3fa9.tar.gz opencode-c68261fc067c148c3b986441f4173e4bcb6d3fa9.zip | |
fix(ui): add max-width 280px to tabs with text truncation
| -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; |