Skip to content

fix(ux): better rounded tabs, x button styles + hover state #39913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 20, 2025
Merged

fix(ux): better rounded tabs, x button styles + hover state #39913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7b4d4ee
better rounded tabs, x button styles + hover state
adamleithp Oct 17, 2025
8750de2
remove sub pixel value
adamleithp Oct 17, 2025
0ab031c
Update UI snapshots for `chromium` (16)
github-actions[bot] Oct 17, 2025
ce5fbc2
Update UI snapshots for `chromium` (3)
github-actions[bot] Oct 17, 2025
0d3991a
Update UI snapshots for `chromium` (1)
github-actions[bot] Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified frontend/__snapshots__/scenes-app-errortracking--group-page--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ..._snapshots__/scenes-app-heatmaps--heatmaps-browser-with-page-selected--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/scenes-app-persons-groups--person-not-found--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 10 additions & 9 deletions frontend/src/layout/scenes/SceneTabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
.scene-tab-active-indicator {
position: absolute;
right: -5px;
right: calc(50% + -1px);
bottom: -6px;
z-index: 11;
width: calc(100% + 10px);
height: 7px;
width: calc(100% + 18px);
height: 12px;
background-color: var(--color-bg-primary);
transform: translateX(50%);
}

.scene-tab-active-indicator::before {
position: absolute;
right: calc(100% - 6px);
right: calc(100% - 9px);
bottom: 0.5px;
width: 8px;
height: 8px;
width: 12px;
height: 12px;
content: '';
background-color: var(--color-bg-surface-tertiary);
border-right: 1px solid var(--color-border-primary);
Expand All @@ -24,9 +25,9 @@
.scene-tab-active-indicator::after {
position: absolute;
bottom: 0.5px;
left: calc(100% - 6px);
width: 8px;
height: 8px;
left: calc(100% - 11px);
width: 12px;
height: 12px;
content: '';
background-color: var(--color-bg-surface-tertiary);
border-bottom: 1px solid var(--color-border-primary);
Expand Down
61 changes: 32 additions & 29 deletions frontend/src/layout/scenes/SceneTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export function SceneTabs({ className }: SceneTabsProps): JSX.Element {
iconOnly
onClick={toggleSearchBar}
data-attr="tree-navbar-search-button"
className="z-20"
size="sm"
aria-label="Search (Command + K) or Commands (Command + Shift + K)"
aria-describedby="search-tooltip"
Expand Down Expand Up @@ -122,14 +123,15 @@ export function SceneTabs({ className }: SceneTabsProps): JSX.Element {
buttonProps={{
size: 'sm',
className:
'p-1 flex flex-row items-center gap-1 cursor-pointer rounded-tr rounded-tl border-b',
'p-1 flex flex-row items-center gap-1 cursor-pointer rounded-lg border-b z-20 ml-px',
iconOnly: true,
}}
tooltip={
<>
New tab <KeyboardShortcut command b />
</>
}
tooltipPlacement="bottom"
>
<IconPlus className="!ml-0" fontSize={14} />
</Link>
Expand Down Expand Up @@ -200,6 +202,30 @@ function SceneTabComponent({ tab, className, isDragging }: SceneTabProps): JSX.E
fullWidth
className="border-0 rounded-none group/colorful-product-icons colorful-product-icons-true"
>
{canRemoveTab && (
<ButtonPrimitive
onClick={(e) => {
e.stopPropagation()
e.preventDefault()
removeTab(tab)
}}
isSideActionRight
iconOnly
size="xs"
className="order-last group z-20 size-5 rounded top-1/2 -translate-y-1/2 right-[5px] hover:[&~.button-primitive:not(.tab-active)]:bg-surface-primary"
tooltip={
tab.active ? (
<>
Close active tab <KeyboardShortcut shift command b />
</>
) : (
'Close tab'
)
}
>
<IconX className="text-tertiary size-3 group-hover:text-primary z-10" />
</ButtonPrimitive>
)}
<ButtonPrimitive
onClick={(e) => {
e.stopPropagation()
Expand All @@ -226,10 +252,10 @@ function SceneTabComponent({ tab, className, isDragging }: SceneTabProps): JSX.E
}}
hasSideActionRight
className={cn(
'w-full',
'relative py-0.5 pl-2 pr-5 flex flex-row items-center gap-1 rounded-tr rounded-tl border border-transparent',
'w-full order-first',
'relative pb-0.5 pt-[2px] pl-2 pr-5 flex flex-row items-center gap-1 rounded-lg border border-transparent',
tab.active
? 'rounded-bl-none rounded-br-none cursor-default text-primary bg-primary border-primary'
? 'tab-active rounded-bl-none rounded-br-none cursor-default text-primary bg-primary border-primary'
: 'cursor-pointer text-secondary bg-transparent hover:bg-surface-primary hover:text-primary-hover z-20',
'focus:outline-none',
className
Expand All @@ -239,6 +265,7 @@ function SceneTabComponent({ tab, className, isDragging }: SceneTabProps): JSX.E
? `${tab.customTitle} (${tab.title})`
: tab.title
}
tooltipPlacement="bottom"
>
{tab.iconType === 'blank' ? (
<></>
Expand All @@ -250,7 +277,7 @@ function SceneTabComponent({ tab, className, isDragging }: SceneTabProps): JSX.E
{isEditing ? (
<input
ref={inputRef}
className="scene-tab-title flex-grow text-left bg-primary border-none outline-1 text-primary z-10"
className="scene-tab-title grow text-left bg-primary border-none outline-1 text-primary z-30 max-w-full"
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onBlur={() => {
Expand Down Expand Up @@ -278,30 +305,6 @@ function SceneTabComponent({ tab, className, isDragging }: SceneTabProps): JSX.E
</div>
)}
</ButtonPrimitive>
{canRemoveTab && (
<ButtonPrimitive
onClick={(e) => {
e.stopPropagation()
e.preventDefault()
removeTab(tab)
}}
isSideActionRight
iconOnly
size="xs"
className="group hover:bg-transparent mt-px z-20"
tooltip={
tab.active ? (
<>
Close active tab <KeyboardShortcut shift command b />
</>
) : (
'Close tab'
)
}
>
<IconX className="text-tertiary size-3 group-hover:text-primary z-10" />
</ButtonPrimitive>
)}
</ButtonGroupPrimitive>
</div>
)
Expand Down
Loading