monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Hill
2026-01-27 14:01:04 +00:00
parent 2d0049f0d9
commit c68261fc06
3 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/src/components/session/session-sortable-tab.tsx
View File

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

2
packages/app/src/pages/session.tsx
View File

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

6
packages/ui/src/components/tabs.css
View File

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