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

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

View File

@@ -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>
)
}

View File

@@ -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" />

View File

@@ -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;