| author |  maria <maria@kuuro.net> 2026-08-02 23:35:04-04:00 |
| committer |  GitHub <noreply@github.com> 2026-08-02 23:35:04-04:00 |
| log | 30c96228067bcd3a49e432ec898e52d4acb04297 |
| tree | 6dd6c8f4c94fd96091f24240f3951e7f37aa7b87 |
| parent | 69dfb7f09a473d270a8b127cb1c39836fa1c6bc4 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): polish interface spacing (#5252)
8 files changed, 16 insertions(+), 11 deletions(-)
apps/web/src/components/BranchToolbar.tsx+1-1
| ... | @@ -304,7 +304,7 @@ export const BranchToolbar = memo(function BranchToolbar({ | ... | @@ -304,7 +304,7 @@ export const BranchToolbar = memo(function BranchToolbar({ |
| 304 | if (!hasActiveThread || !activeProject) return null; | 304 | if (!hasActiveThread || !activeProject) return null; |
| 305 | 305 | ||
| 306 | return ( | 306 | return ( |
| 307 | <div className="chat-composer-context-strip -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 px-1 pt-5 pb-1"> | 307 | <div className="chat-composer-context-strip -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 ps-1 pe-2 pt-5 pb-1"> |
| 308 | {isMobile ? ( | 308 | {isMobile ? ( |
| 309 | <MobileRunContextSelector | 309 | <MobileRunContextSelector |
| 310 | envLocked={envLocked} | 310 | envLocked={envLocked} |
apps/web/src/components/ChatView.tsx+1-1
| ... | @@ -5643,7 +5643,7 @@ function ChatViewContent(props: ChatViewProps) { | ... | @@ -5643,7 +5643,7 @@ function ChatViewContent(props: ChatViewProps) { |
| 5643 | /> | 5643 | /> |
| 5644 | ); | 5644 | ); |
| 5645 | const panelLayoutControls = ( | 5645 | const panelLayoutControls = ( |
| 5646 | <div className="workspace-titlebar-controls z-50 gap-1 [-webkit-app-region:no-drag]"> | 5646 | <div className="workspace-titlebar-controls z-50 mr-px gap-1 [-webkit-app-region:no-drag]"> |
| 5647 | {rightPanelOpen && !shouldUsePlanSidebarSheet ? ( | 5647 | {rightPanelOpen && !shouldUsePlanSidebarSheet ? ( |
| 5648 | <RightPanelMaximizeControl | 5648 | <RightPanelMaximizeControl |
| 5649 | maximized={rightPanelMaximized} | 5649 | maximized={rightPanelMaximized} |
apps/web/src/components/GitActionsControl.tsx+2-1
| ... | @@ -1693,7 +1693,7 @@ export default function GitActionsControl({ | ... | @@ -1693,7 +1693,7 @@ export default function GitActionsControl({ |
| 1693 | render={ | 1693 | render={ |
| 1694 | <Button | 1694 | <Button |
| 1695 | aria-disabled="true" | 1695 | aria-disabled="true" |
| 1696 | className="cursor-not-allowed rounded-e-none border-e-0 opacity-64 before:rounded-e-none" | 1696 | className="cursor-not-allowed rounded-e-none border-e-0 ps-[8.5px] opacity-64 before:rounded-e-none" |
| 1697 | size="xs" | 1697 | size="xs" |
| 1698 | variant="outline" | 1698 | variant="outline" |
| 1699 | /> | 1699 | /> |
| ... | @@ -1715,6 +1715,7 @@ export default function GitActionsControl({ | ... | @@ -1715,6 +1715,7 @@ export default function GitActionsControl({ |
| 1715 | <Button | 1715 | <Button |
| 1716 | variant="outline" | 1716 | variant="outline" |
| 1717 | size="xs" | 1717 | size="xs" |
| 1718 | className="ps-[8.5px]" | ||
| 1718 | disabled={isGitActionRunning || quickAction.disabled} | 1719 | disabled={isGitActionRunning || quickAction.disabled} |
| 1719 | onClick={runQuickAction} | 1720 | onClick={runQuickAction} |
| 1720 | > | 1721 | > |
apps/web/src/components/SidebarV2.tsx+2-2
| ... | @@ -2674,7 +2674,7 @@ export default function SidebarV2() { | ... | @@ -2674,7 +2674,7 @@ export default function SidebarV2() { |
| 2674 | render={ | 2674 | render={ |
| 2675 | <SidebarMenuButton | 2675 | <SidebarMenuButton |
| 2676 | aria-label="Filter threads by project" | 2676 | aria-label="Filter threads by project" |
| 2677 | className="min-w-0 flex-1 focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar" | 2677 | className="min-w-0 flex-1 ps-[calc(var(--sidebar-row-content-inset)-1px)] focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar" |
| 2678 | /> | 2678 | /> |
| 2679 | } | 2679 | } |
| 2680 | > | 2680 | > |
| ... | @@ -2765,7 +2765,7 @@ export default function SidebarV2() { | ... | @@ -2765,7 +2765,7 @@ export default function SidebarV2() { |
| 2765 | </SidebarGroup> | 2765 | </SidebarGroup> |
| 2766 | } | 2766 | } |
| 2767 | > | 2767 | > |
| 2768 | <SidebarGroup className="px-[var(--sidebar-content-inset)] pb-1 pt-0"> | 2768 | <SidebarGroup className="ps-[calc(var(--sidebar-content-inset)+1px)] pe-[var(--sidebar-content-inset)] pb-1 pt-0"> |
| 2769 | {isSearchingThreads ? ( | 2769 | {isSearchingThreads ? ( |
| 2770 | threadSearchResults.length > 0 ? ( | 2770 | threadSearchResults.length > 0 ? ( |
| 2771 | <TooltipProvider | 2771 | <TooltipProvider |
apps/web/src/components/chat/ChatComposer.tsx+3-2
| ... | @@ -3104,7 +3104,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) | ... | @@ -3104,7 +3104,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) |
| 3104 | 3104 | ||
| 3105 | {/* Bottom toolbar */} | 3105 | {/* Bottom toolbar */} |
| 3106 | {isComposerCollapsedMobile ? null : activePendingApproval ? ( | 3106 | {isComposerCollapsedMobile ? null : activePendingApproval ? ( |
| 3107 | <div className="flex items-center justify-end gap-2 px-2.5 pb-2.5 sm:px-3 sm:pb-3"> | 3107 | <div className="flex items-center justify-end gap-2 px-3 pb-3 sm:px-4 sm:pb-4"> |
| 3108 | <ComposerPendingApprovalActions | 3108 | <ComposerPendingApprovalActions |
| 3109 | requestId={activePendingApproval.requestId} | 3109 | requestId={activePendingApproval.requestId} |
| 3110 | isResponding={respondingRequestIds.includes(activePendingApproval.requestId)} | 3110 | isResponding={respondingRequestIds.includes(activePendingApproval.requestId)} |
| ... | @@ -3116,7 +3116,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) | ... | @@ -3116,7 +3116,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) |
| 3116 | data-chat-composer-footer="true" | 3116 | data-chat-composer-footer="true" |
| 3117 | data-chat-composer-footer-compact={isComposerFooterCompact ? "true" : "false"} | 3117 | data-chat-composer-footer-compact={isComposerFooterCompact ? "true" : "false"} |
| 3118 | className={cn( | 3118 | className={cn( |
| 3119 | "flex min-w-0 flex-nowrap items-center justify-between gap-2 overflow-visible px-2.5 pb-2.5 sm:px-3 sm:pb-3", | 3119 | "flex min-w-0 flex-nowrap items-center justify-between gap-2 overflow-visible px-3 pb-3 sm:px-4 sm:pb-4", |
| 3120 | pendingUserInputs.length > 0 && "pt-2", | 3120 | pendingUserInputs.length > 0 && "pt-2", |
| 3121 | isComposerFooterCompact ? "gap-1.5" : "gap-2 sm:gap-0", | 3121 | isComposerFooterCompact ? "gap-1.5" : "gap-2 sm:gap-0", |
| 3122 | showMobilePendingAnswerActions && "hidden sm:flex", | 3122 | showMobilePendingAnswerActions && "hidden sm:flex", |
| ... | @@ -3145,6 +3145,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) | ... | @@ -3145,6 +3145,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) |
| 3145 | instanceEntries={providerInstanceEntries} | 3145 | instanceEntries={providerInstanceEntries} |
| 3146 | keybindings={keybindings} | 3146 | keybindings={keybindings} |
| 3147 | modelOptionsByInstance={modelOptionsByInstance} | 3147 | modelOptionsByInstance={modelOptionsByInstance} |
| 3148 | triggerClassName="-ms-px ps-0" | ||
| 3148 | terminalOpen={terminalOpen} | 3149 | terminalOpen={terminalOpen} |
| 3149 | open={isComposerModelPickerOpen} | 3150 | open={isComposerModelPickerOpen} |
| 3150 | {...(composerProviderState.modelPickerIconClassName | 3151 | {...(composerProviderState.modelPickerIconClassName |
apps/web/src/components/chat/ContextWindowMeter.tsx+5-4
| ... | @@ -21,7 +21,7 @@ export function ContextWindowMeter(props: { | ... | @@ -21,7 +21,7 @@ export function ContextWindowMeter(props: { |
| 21 | const normalizedPercentage = Math.max(0, Math.min(100, usage.usedPercentage ?? 0)); | 21 | const normalizedPercentage = Math.max(0, Math.min(100, usage.usedPercentage ?? 0)); |
| 22 | const radius = 9.75; | 22 | const radius = 9.75; |
| 23 | const circumference = 2 * Math.PI * radius; | 23 | const circumference = 2 * Math.PI * radius; |
| 24 | const dashOffset = circumference - (normalizedPercentage / 100) * circumference; | 24 | const dashOffset = circumference * (1 - normalizedPercentage / 100); |
| 25 | const totalProcessedTokens = usage.totalProcessedTokens ?? null; | 25 | const totalProcessedTokens = usage.totalProcessedTokens ?? null; |
| 26 | const showTotalProcessed = totalProcessedTokens !== null && totalProcessedTokens > 0; | 26 | const showTotalProcessed = totalProcessedTokens !== null && totalProcessedTokens > 0; |
| 27 | const isOverloaded = normalizedPercentage > 90; | 27 | const isOverloaded = normalizedPercentage > 90; |
| ... | @@ -73,7 +73,7 @@ export function ContextWindowMeter(props: { | ... | @@ -73,7 +73,7 @@ export function ContextWindowMeter(props: { |
| 73 | strokeLinecap="round" | 73 | strokeLinecap="round" |
| 74 | strokeDasharray={circumference} | 74 | strokeDasharray={circumference} |
| 75 | strokeDashoffset={dashOffset} | 75 | strokeDashoffset={dashOffset} |
| 76 | className="transition-[stroke-dashoffset] duration-500 ease-out motion-reduce:transition-none" | 76 | className="transition-[stroke-dashoffset,stroke] duration-500 ease-out motion-reduce:transition-none" |
| 77 | /> | 77 | /> |
| 78 | </svg> | 78 | </svg> |
| 79 | </span> | 79 | </span> |
| ... | @@ -84,9 +84,10 @@ export function ContextWindowMeter(props: { | ... | @@ -84,9 +84,10 @@ export function ContextWindowMeter(props: { |
| 84 | tooltipStyle | 84 | tooltipStyle |
| 85 | side="top" | 85 | side="top" |
| 86 | align="end" | 86 | align="end" |
| 87 | className="dropdown-glass w-64 max-w-none border-0! bg-secondary! p-0 shadow-none! before:hidden" | 87 | viewportClassName="p-0" |
| 88 | className="w-64 max-w-none text-left whitespace-normal" | ||
| 88 | > | 89 | > |
| 89 | <div className="flex flex-col gap-2 p-3"> | 90 | <div className="flex flex-col gap-2 p-[var(--floating-content-inset)]"> |
| 90 | <div className="flex items-center justify-between gap-3"> | 91 | <div className="flex items-center justify-between gap-3"> |
| 91 | <div className="font-medium text-muted-foreground text-xs">Context Window</div> | 92 | <div className="font-medium text-muted-foreground text-xs">Context Window</div> |
| 92 | {usage.maxTokens !== null && usedPercentage ? ( | 93 | {usage.maxTokens !== null && usedPercentage ? ( |
apps/web/src/components/chat/OpenInPicker.tsx+1
| ... | @@ -260,6 +260,7 @@ export const OpenInPicker = memo(function OpenInPicker({ | ... | @@ -260,6 +260,7 @@ export const OpenInPicker = memo(function OpenInPicker({ |
| 260 | <Group aria-label="Open in editor"> | 260 | <Group aria-label="Open in editor"> |
| 261 | <Button | 261 | <Button |
| 262 | aria-label={compact ? "Open file in preferred editor" : undefined} | 262 | aria-label={compact ? "Open file in preferred editor" : undefined} |
| 263 | className="ps-[8.5px]" | ||
| 263 | size="xs" | 264 | size="xs" |
| 264 | variant="outline" | 265 | variant="outline" |
| 265 | disabled={!preferredEditor || !openInCwd} | 266 | disabled={!preferredEditor || !openInCwd} |
apps/web/src/components/settings/SettingsSidebarNav.tsx+1
| ... | @@ -248,6 +248,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { | ... | @@ -248,6 +248,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { |
| 248 | </p> | 248 | </p> |
| 249 | ) : null} | 249 | ) : null} |
| 250 | <SidebarMenu | 250 | <SidebarMenu |
| 251 | className="ps-px" | ||
| 251 | id={isSearching && hasResults ? "settings-search-results" : undefined} | 252 | id={isSearching && hasResults ? "settings-search-results" : undefined} |
| 252 | role={isSearching && hasResults ? "listbox" : undefined} | 253 | role={isSearching && hasResults ? "listbox" : undefined} |
| 253 | aria-label={isSearching && hasResults ? "Settings search results" : undefined} | 254 | aria-label={isSearching && hasResults ? "Settings search results" : undefined} |