authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-08-02 23:35:04-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-02 23:35:04-04:00
log30c96228067bcd3a49e432ec898e52d4acb04297
tree6dd6c8f4c94fd96091f24240f3951e7f37aa7b87
parent69dfb7f09a473d270a8b127cb1c39836fa1c6bc4
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({
304304 if (!hasActiveThread || !activeProject) return null;
305305
306306 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">
308308 {isMobile ? (
309309 <MobileRunContextSelector
310310 envLocked={envLocked}
apps/web/src/components/ChatView.tsx+1-1
......@@ -5643,7 +5643,7 @@ function ChatViewContent(props: ChatViewProps) {
56435643 />
56445644 );
56455645 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]">
56475647 {rightPanelOpen && !shouldUsePlanSidebarSheet ? (
56485648 <RightPanelMaximizeControl
56495649 maximized={rightPanelMaximized}
apps/web/src/components/GitActionsControl.tsx+2-1
......@@ -1693,7 +1693,7 @@ export default function GitActionsControl({
16931693 render={
16941694 <Button
16951695 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"
16971697 size="xs"
16981698 variant="outline"
16991699 />
......@@ -1715,6 +1715,7 @@ export default function GitActionsControl({
17151715 <Button
17161716 variant="outline"
17171717 size="xs"
1718 className="ps-[8.5px]"
17181719 disabled={isGitActionRunning || quickAction.disabled}
17191720 onClick={runQuickAction}
17201721 >
apps/web/src/components/SidebarV2.tsx+2-2
......@@ -2674,7 +2674,7 @@ export default function SidebarV2() {
26742674 render={
26752675 <SidebarMenuButton
26762676 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"
26782678 />
26792679 }
26802680 >
......@@ -2765,7 +2765,7 @@ export default function SidebarV2() {
27652765 </SidebarGroup>
27662766 }
27672767 >
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">
27692769 {isSearchingThreads ? (
27702770 threadSearchResults.length > 0 ? (
27712771 <TooltipProvider
apps/web/src/components/chat/ChatComposer.tsx+3-2
......@@ -3104,7 +3104,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
31043104
31053105 {/* Bottom toolbar */}
31063106 {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">
31083108 <ComposerPendingApprovalActions
31093109 requestId={activePendingApproval.requestId}
31103110 isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
......@@ -3116,7 +3116,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
31163116 data-chat-composer-footer="true"
31173117 data-chat-composer-footer-compact={isComposerFooterCompact ? "true" : "false"}
31183118 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",
31203120 pendingUserInputs.length > 0 && "pt-2",
31213121 isComposerFooterCompact ? "gap-1.5" : "gap-2 sm:gap-0",
31223122 showMobilePendingAnswerActions && "hidden sm:flex",
......@@ -3145,6 +3145,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
31453145 instanceEntries={providerInstanceEntries}
31463146 keybindings={keybindings}
31473147 modelOptionsByInstance={modelOptionsByInstance}
3148 triggerClassName="-ms-px ps-0"
31483149 terminalOpen={terminalOpen}
31493150 open={isComposerModelPickerOpen}
31503151 {...(composerProviderState.modelPickerIconClassName
apps/web/src/components/chat/ContextWindowMeter.tsx+5-4
......@@ -21,7 +21,7 @@ export function ContextWindowMeter(props: {
2121 const normalizedPercentage = Math.max(0, Math.min(100, usage.usedPercentage ?? 0));
2222 const radius = 9.75;
2323 const circumference = 2 * Math.PI * radius;
24 const dashOffset = circumference - (normalizedPercentage / 100) * circumference;
24 const dashOffset = circumference * (1 - normalizedPercentage / 100);
2525 const totalProcessedTokens = usage.totalProcessedTokens ?? null;
2626 const showTotalProcessed = totalProcessedTokens !== null && totalProcessedTokens > 0;
2727 const isOverloaded = normalizedPercentage > 90;
......@@ -73,7 +73,7 @@ export function ContextWindowMeter(props: {
7373 strokeLinecap="round"
7474 strokeDasharray={circumference}
7575 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"
7777 />
7878 </svg>
7979 </span>
......@@ -84,9 +84,10 @@ export function ContextWindowMeter(props: {
8484 tooltipStyle
8585 side="top"
8686 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"
8889 >
89 <div className="flex flex-col gap-2 p-3">
90 <div className="flex flex-col gap-2 p-[var(--floating-content-inset)]">
9091 <div className="flex items-center justify-between gap-3">
9192 <div className="font-medium text-muted-foreground text-xs">Context Window</div>
9293 {usage.maxTokens !== null && usedPercentage ? (
apps/web/src/components/chat/OpenInPicker.tsx+1
......@@ -260,6 +260,7 @@ export const OpenInPicker = memo(function OpenInPicker({
260260 <Group aria-label="Open in editor">
261261 <Button
262262 aria-label={compact ? "Open file in preferred editor" : undefined}
263 className="ps-[8.5px]"
263264 size="xs"
264265 variant="outline"
265266 disabled={!preferredEditor || !openInCwd}
apps/web/src/components/settings/SettingsSidebarNav.tsx+1
......@@ -248,6 +248,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
248248 </p>
249249 ) : null}
250250 <SidebarMenu
251 className="ps-px"
251252 id={isSearching && hasResults ? "settings-search-results" : undefined}
252253 role={isSearching && hasResults ? "listbox" : undefined}
253254 aria-label={isSearching && hasResults ? "Settings search results" : undefined}