refactor(ui): trim header trigger labels and fix dropdown anchoring

OpenInAppButton and ProjectActionsButton now render icon-only triggers in the header instead of icon + text. Padding is tightened accordingly and the now-unused selectedButtonLabel / formatActionButtonLabel helpers are gone.

With narrower triggers the previous center-aligned dropdown with translate -30px started overflowing the viewport on the left edge for ProjectActions. Switched ProjectActions dropdown to align="start" and OpenInApp dropdown to align="end" (matching their positions in the header) and removed the manual translate offset.

Also fixed a long-standing inconsistency where clicking an already-running action in the ProjectActions dropdown re-ran it instead of stopping; the non-compact branch was missing toggleStopIfRunning=true that the compact branch already passed.

MiniChat header now uses bg-sidebar to match the main desktop header palette.
This commit is contained in:
Bohdan Triapitsyn
2026-05-21 15:45:44 +03:00
parent a38e9b9cb9
commit e57f66ccd3
3 changed files with 9 additions and 37 deletions
@@ -142,8 +142,9 @@ export const OpenInAppButton = ({ directory, className }: OpenInAppButtonProps)
type="button"
onClick={() => void handleOpen(selectedApp)}
className={cn(
'inline-flex h-full items-center gap-2 px-3 typography-ui-label font-medium',
'text-foreground hover:bg-interactive-hover transition-colors'
'inline-flex h-full items-center px-2.5 typography-ui-label font-medium',
'text-foreground hover:bg-interactive-hover transition-colors',
isScanning && 'animate-pulse'
)}
aria-label={t('openInApp.actions.openInAria', { app: selectedApp.label })}
>
@@ -152,9 +153,6 @@ export const OpenInAppButton = ({ directory, className }: OpenInAppButtonProps)
iconDataUrl={selectedApp.iconDataUrl}
fallbackIconDataUrl={selectedApp.fallbackIconDataUrl}
/>
<span className={cn('header-open-label', isScanning ? 'animate-pulse text-muted-foreground' : undefined)}>
{t('openInApp.actions.open')}
</span>
</button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -171,9 +169,8 @@ export const OpenInAppButton = ({ directory, className }: OpenInAppButtonProps)
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="center"
align="end"
className="w-56 max-h-[70vh] overflow-y-auto"
style={{ translate: '-30px 0' }}
>
<DropdownMenuItem className="flex items-center gap-2" onClick={() => void handleCopyPath()}>
<Icon name="file-copy" className="h-4 w-4" />