From 2951bf53518bbbf57b84e2363b4de61c338e062e Mon Sep 17 00:00:00 2001 From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co> Date: Sun, 14 Jun 2026 23:19:57 -0700 Subject: [PATCH] fix(desktop): convert px text literals to rem so zoom scales app-wide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cmd +/- zoom scales the root html font-size (rem-only by design), but text-[Npx] font literals froze text in pixels and broke zoom outside the timeline. Convert the 63 non-overlapping UI surfaces to rem so text scales proportionally everywhere. Mapping: 12px -> stock text-xs token; sizes with no clean stock home (7-11px micro-text on avatars, badges, chips) -> 1:1 rem literals to preserve exact visual hierarchy with zero pixel shift. Also converts the 2 stray leading-[100px] line-height literals to rem. Deliberately defers the 3 render-path files (MessageRow.tsx, markdown.tsx, mentionChip.ts) to PR #1052, which already converts them and is awaiting merge — touching them here on a main base would manufacture a conflict. The check:px-text guard lands with #1052; once it merges, the guard covers this branch's 63 files plus #1052's 3. Co-authored-by: Taylor Ho Signed-off-by: Taylor Ho --- .../src/features/agent-memory/ui/MemorySection.tsx | 4 ++-- .../features/agents/ui/AddTeamToChannelDialog.tsx | 2 +- .../features/agents/ui/AgentSessionToolItem.tsx | 6 +++--- .../agents/ui/AgentSessionTranscriptList.tsx | 6 +++--- .../features/agents/ui/ManagedAgentLogPanel.tsx | 4 ++-- desktop/src/features/agents/ui/ManagedAgentRow.tsx | 4 ++-- desktop/src/features/agents/ui/ModelPicker.tsx | 2 +- .../agents/ui/PersonaCatalogSelectionBadge.tsx | 2 +- desktop/src/features/agents/ui/RawEventRail.tsx | 4 ++-- .../features/agents/ui/RelayDirectorySection.tsx | 4 ++-- desktop/src/features/agents/ui/RespondToField.tsx | 4 ++-- desktop/src/features/agents/ui/TeamDialog.tsx | 2 +- desktop/src/features/agents/ui/TeamsSection.tsx | 6 +++--- .../channels/ui/AddChannelBotPersonasSection.tsx | 12 ++++++------ .../channels/ui/AddChannelBotTeamsSection.tsx | 8 ++++---- .../channels/ui/AgentSessionThreadPanel.tsx | 4 ++-- .../src/features/channels/ui/BotActivityBar.tsx | 8 ++++---- .../channels/ui/ChannelMemberInviteCard.tsx | 4 ++-- .../features/channels/ui/ChannelScreenHeader.tsx | 2 +- .../src/features/channels/ui/MembersSidebar.tsx | 6 +++--- .../channels/ui/MembersSidebarMemberCard.tsx | 4 ++-- desktop/src/features/channels/ui/QuickBotBar.tsx | 2 +- desktop/src/features/home/ui/FeedSection.tsx | 10 +++++----- desktop/src/features/home/ui/InboxDetailPane.tsx | 2 +- desktop/src/features/home/ui/InboxListPane.tsx | 6 +++--- .../src/features/home/ui/RecentNotesSection.tsx | 4 ++-- .../src/features/huddle/components/HuddleBar.tsx | 2 +- .../features/huddle/components/HuddleIndicator.tsx | 2 +- .../src/features/huddle/components/MicControls.tsx | 2 +- .../features/huddle/components/ParticipantList.tsx | 6 +++--- .../features/messages/ui/ComposerAttachments.tsx | 2 +- desktop/src/features/messages/ui/DayDivider.tsx | 2 +- desktop/src/features/messages/ui/DiffViewer.tsx | 6 +++--- .../src/features/messages/ui/MessageComposer.tsx | 4 ++-- .../features/messages/ui/MessageThreadPanel.tsx | 2 +- .../messages/ui/MessageThreadSummaryRow.tsx | 2 +- .../src/features/messages/ui/MessageTimeline.tsx | 2 +- .../src/features/messages/ui/SystemMessageRow.tsx | 6 +++--- .../features/messages/ui/TypingIndicatorRow.tsx | 4 ++-- desktop/src/features/onboarding/ui/AvatarStep.tsx | 2 +- .../features/onboarding/ui/MembershipDenied.tsx | 2 +- .../features/onboarding/ui/NostrKeyImportForm.tsx | 2 +- .../src/features/profile/ui/UserProfilePopover.tsx | 2 +- .../src/features/pulse/ui/AgentActivityCard.tsx | 4 ++-- desktop/src/features/pulse/ui/NoteCard.tsx | 2 +- desktop/src/features/pulse/ui/PulseTabBar.tsx | 2 +- desktop/src/features/search/ui/TopbarSearch.tsx | 6 +++--- .../settings/ui/ChannelTemplatesSettingsCard.tsx | 7 +++++-- .../features/settings/ui/DoctorSettingsPanel.tsx | 14 +++++++------- .../settings/ui/NotificationSettingsCard.tsx | 2 +- .../features/settings/ui/ProfileSettingsCard.tsx | 2 +- desktop/src/features/settings/ui/SoundPicker.tsx | 2 +- desktop/src/features/sidebar/ui/AppSidebar.tsx | 4 ++-- .../src/features/sidebar/ui/MoreUnreadButton.tsx | 2 +- .../features/sidebar/ui/NewDirectMessageDialog.tsx | 2 +- .../src/features/sidebar/ui/SidebarProfileCard.tsx | 5 ++++- desktop/src/features/sidebar/ui/SidebarSection.tsx | 8 ++++---- .../features/user-status/ui/SetStatusDialog.tsx | 2 +- desktop/src/features/workflows/ui/WorkflowCard.tsx | 2 +- .../features/workflows/ui/WorkflowDetailPanel.tsx | 6 +++--- .../src/features/workflows/ui/WorkflowRunTrace.tsx | 6 +++--- .../features/workspaces/ui/WorkspaceSwitcher.tsx | 2 +- desktop/src/shared/ui/UserAvatar.tsx | 4 ++-- desktop/src/shared/ui/VideoPlayer.tsx | 14 +++++++------- desktop/src/shared/ui/badge.tsx | 2 +- 65 files changed, 139 insertions(+), 133 deletions(-) diff --git a/desktop/src/features/agent-memory/ui/MemorySection.tsx b/desktop/src/features/agent-memory/ui/MemorySection.tsx index 0b2d4f4a4..df8025159 100644 --- a/desktop/src/features/agent-memory/ui/MemorySection.tsx +++ b/desktop/src/features/agent-memory/ui/MemorySection.tsx @@ -253,8 +253,8 @@ function MemoryGraphView({ className="text-xs italic text-muted-foreground" data-testid="agent-memory-no-core" > - No core memory yet — - agent identity is unrooted. + No core memory yet + — agent identity is unrooted.

) : null} diff --git a/desktop/src/features/agents/ui/AddTeamToChannelDialog.tsx b/desktop/src/features/agents/ui/AddTeamToChannelDialog.tsx index c54c3e6e6..693c0e5cf 100644 --- a/desktop/src/features/agents/ui/AddTeamToChannelDialog.tsx +++ b/desktop/src/features/agents/ui/AddTeamToChannelDialog.tsx @@ -178,7 +178,7 @@ export function AddTeamToChannelDialog({ > diff --git a/desktop/src/features/agents/ui/AgentSessionToolItem.tsx b/desktop/src/features/agents/ui/AgentSessionToolItem.tsx index 09411f2e6..4c443ba62 100644 --- a/desktop/src/features/agents/ui/AgentSessionToolItem.tsx +++ b/desktop/src/features/agents/ui/AgentSessionToolItem.tsx @@ -198,7 +198,7 @@ function ToolTimestamp({ return ( - + {time} {duration ? ` · ${duration}` : null} @@ -260,7 +260,7 @@ function BuzzToolInlineAction({ if (action.onClick) { return ( {isAgent ? ( - + bot ) : null} diff --git a/desktop/src/features/pulse/ui/PulseTabBar.tsx b/desktop/src/features/pulse/ui/PulseTabBar.tsx index 937682c7e..cc3793b93 100644 --- a/desktop/src/features/pulse/ui/PulseTabBar.tsx +++ b/desktop/src/features/pulse/ui/PulseTabBar.tsx @@ -103,7 +103,7 @@ export function PulseTabBar({ > Agents {relayAgents.length > 0 ? ( - + {relayAgents.length} ) : null} diff --git a/desktop/src/features/search/ui/TopbarSearch.tsx b/desktop/src/features/search/ui/TopbarSearch.tsx index 3ee05c49c..60bd1abc2 100644 --- a/desktop/src/features/search/ui/TopbarSearch.tsx +++ b/desktop/src/features/search/ui/TopbarSearch.tsx @@ -201,7 +201,7 @@ export function TopbarSearch({ placeholder="Search everything" value={query} /> - + ⌘K @@ -212,7 +212,7 @@ export function TopbarSearch({ data-testid="search-results" > {debouncedQuery.length < MIN_SEARCH_QUERY_LENGTH ? ( -
+

Type at least two characters for live suggestions.

) : searchQuery.isLoading && results.length === 0 ? ( @@ -291,7 +291,7 @@ export function TopbarSearch({ : truncateResultText(result.hit.content)} - + {result.kind === "channel" ? "Channel" : `${describeSearchHit(result.hit)} · ${formatRelativeTime(result.hit.createdAt)}`} diff --git a/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx b/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx index 0181e1928..ff01e693c 100644 --- a/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx +++ b/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx @@ -216,7 +216,10 @@ function TemplateRow({
{template.name} {template.isBuiltin ? ( - + built-in ) : null} @@ -756,7 +759,7 @@ function RuntimeRow({ ) : ( )} diff --git a/desktop/src/features/settings/ui/DoctorSettingsPanel.tsx b/desktop/src/features/settings/ui/DoctorSettingsPanel.tsx index a6d3044cd..c5c27149b 100644 --- a/desktop/src/features/settings/ui/DoctorSettingsPanel.tsx +++ b/desktop/src/features/settings/ui/DoctorSettingsPanel.tsx @@ -109,7 +109,7 @@ function RuntimeRow({

{runtime.label}

{runtime.command ? ( - + {runtime.command} ) : null} @@ -134,21 +134,21 @@ function RuntimeRow({ {runtime.underlyingCliPath && runtime.underlyingCliPath !== runtime.binaryPath ? (
-

+

CLI:{" "} {runtime.underlyingCliPath}

-

+

ACP adapter:{" "} {runtime.binaryPath}

) : ( <> -

+

{runtime.binaryPath}

-

+

ACP support built-in — no separate adapter needed.

@@ -158,7 +158,7 @@ function RuntimeRow({ <>

CLI detected at{" "} - + {runtime.underlyingCliPath ?? "unknown path"} {" "} but ACP adapter not found. @@ -176,7 +176,7 @@ function RuntimeRow({ <>

ACP adapter found at{" "} - + {runtime.binaryPath ?? "unknown path"} {" "} but the {runtime.label} CLI is not installed. diff --git a/desktop/src/features/settings/ui/NotificationSettingsCard.tsx b/desktop/src/features/settings/ui/NotificationSettingsCard.tsx index 55a0c9ab7..be85a6bb6 100644 --- a/desktop/src/features/settings/ui/NotificationSettingsCard.tsx +++ b/desktop/src/features/settings/ui/NotificationSettingsCard.tsx @@ -179,7 +179,7 @@ export function NotificationSettingsCard({ {SLOT_LABELS[slot]} {comingSoon ? ( - + Coming soon ) : null} diff --git a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx index cfe3c9bb2..7c49aa0b1 100644 --- a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx +++ b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx @@ -429,7 +429,7 @@ export function ProfileSettingsCard({ > 0 && "buzz-avatar-squish", )} data-testid="profile-avatar-preview-emoji" diff --git a/desktop/src/features/settings/ui/SoundPicker.tsx b/desktop/src/features/settings/ui/SoundPicker.tsx index 5de4f450c..440fd39fc 100644 --- a/desktop/src/features/settings/ui/SoundPicker.tsx +++ b/desktop/src/features/settings/ui/SoundPicker.tsx @@ -113,7 +113,7 @@ export function SoundPicker({ {name} {name === recommended ? ( - + rec. ) : null} diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx index 00e8af524..0106121a7 100644 --- a/desktop/src/features/sidebar/ui/AppSidebar.tsx +++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx @@ -444,7 +444,7 @@ export function AppSidebar({ {homeBadgeCount > 0 ? ( {Math.min(homeBadgeCount, 99)} @@ -492,7 +492,7 @@ export function AppSidebar({ {shouldShowAgentCount ? ( {totalAgentCount} diff --git a/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx b/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx index 5ebca7e47..677ffe9b0 100644 --- a/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx +++ b/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx @@ -3,7 +3,7 @@ import type * as React from "react"; import { Button } from "@/shared/ui/button"; const MORE_UNREAD_BUTTON_CLASS = - "h-7 min-h-7 gap-1.5 rounded-full border-0 bg-primary px-2.5 text-[11px] font-medium text-primary-foreground shadow-md hover:bg-primary/90 [&_svg]:size-3.5"; + "h-7 min-h-7 gap-1.5 rounded-full border-0 bg-primary px-2.5 text-[0.6875rem] font-medium text-primary-foreground shadow-md hover:bg-primary/90 [&_svg]:size-3.5"; export function MoreUnreadButton({ bottomClassName = "bottom-0", diff --git a/desktop/src/features/sidebar/ui/NewDirectMessageDialog.tsx b/desktop/src/features/sidebar/ui/NewDirectMessageDialog.tsx index 70b34d6a3..557ffcffd 100644 --- a/desktop/src/features/sidebar/ui/NewDirectMessageDialog.tsx +++ b/desktop/src/features/sidebar/ui/NewDirectMessageDialog.tsx @@ -180,7 +180,7 @@ export function NewDirectMessageDialog({ > diff --git a/desktop/src/features/sidebar/ui/SidebarProfileCard.tsx b/desktop/src/features/sidebar/ui/SidebarProfileCard.tsx index 97547a576..654403f20 100644 --- a/desktop/src/features/sidebar/ui/SidebarProfileCard.tsx +++ b/desktop/src/features/sidebar/ui/SidebarProfileCard.tsx @@ -78,7 +78,10 @@ export function SidebarProfileCard({ const workspaceLabel = activeWorkspace?.name ?? "No workspace"; const readonlyWorkspaceLabel = ( -

-
+
{channelName ? {channelName} : null} {triggerSummary ? {triggerSummary} : null} diff --git a/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx b/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx index faf22857f..19ff13199 100644 --- a/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx +++ b/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx @@ -186,7 +186,7 @@ export function WorkflowDetailPanel({
-
+
{new Date( run.createdAt * 1000, @@ -216,10 +216,10 @@ export function WorkflowDetailPanel({ {isSelected ? (
-
+
Execution Trace {approvalsQuery.isFetching ? ( - + Refreshing approvals... ) : null} diff --git a/desktop/src/features/workflows/ui/WorkflowRunTrace.tsx b/desktop/src/features/workflows/ui/WorkflowRunTrace.tsx index a1e6b2775..c83743a6a 100644 --- a/desktop/src/features/workflows/ui/WorkflowRunTrace.tsx +++ b/desktop/src/features/workflows/ui/WorkflowRunTrace.tsx @@ -94,7 +94,7 @@ export function WorkflowRunTrace({
{Object.keys(step.output).length > 0 ? (
-

+

Output 

@@ -104,7 +104,7 @@ export function WorkflowRunTrace({
             ) : null}
             {step.error ? (
               

-                

+                

                   Error
                 

                 
@@ -114,7 +114,7 @@ export function WorkflowRunTrace({
             ) : null}
             {pendingApproval ? (
               

-                

+                

                   Pending approval
                 

                 
diff --git a/desktop/src/features/workspaces/ui/WorkspaceSwitcher.tsx b/desktop/src/features/workspaces/ui/WorkspaceSwitcher.tsx
index 2e7e14d04..39c61f91c 100644
--- a/desktop/src/features/workspaces/ui/WorkspaceSwitcher.tsx
+++ b/desktop/src/features/workspaces/ui/WorkspaceSwitcher.tsx
@@ -132,7 +132,7 @@ export function WorkspaceSwitcher({
         
diff --git a/desktop/src/shared/ui/UserAvatar.tsx b/desktop/src/shared/ui/UserAvatar.tsx
index cab6a8fd6..084636755 100644
--- a/desktop/src/shared/ui/UserAvatar.tsx
+++ b/desktop/src/shared/ui/UserAvatar.tsx
@@ -6,8 +6,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar";
 type UserAvatarSize = "xs" | "sm" | "md";
 
 const sizeClasses: Record = {
-  xs: "h-5 w-5 text-[8px]",
-  sm: "h-6 w-6 text-[9px]",
+  xs: "h-5 w-5 text-[0.5rem]",
+  sm: "h-6 w-6 text-[0.5625rem]",
   md: "h-10 w-10 text-xs",
 };
 
diff --git a/desktop/src/shared/ui/VideoPlayer.tsx b/desktop/src/shared/ui/VideoPlayer.tsx
index b967b00e9..db8a78b75 100644
--- a/desktop/src/shared/ui/VideoPlayer.tsx
+++ b/desktop/src/shared/ui/VideoPlayer.tsx
@@ -531,7 +531,7 @@ function VideoScrubber({
           style={{ left: `${hoverRatio * 100}%` }}
         >
           

-          
+          
             {formatTimecode(hoverRatio * duration)} / {formatTimecode(duration)}
           
         

@@ -918,7 +918,7 @@ export function VideoPlayer({
                   )}
                 
                 
                   {formatTimecode(currentTime)}
@@ -932,7 +932,7 @@ export function VideoPlayer({
                   testIdPrefix="video-inline"
                 />
                 
                   {formatTimecode(duration)}
@@ -1716,12 +1716,12 @@ function VideoReviewDialog({
                       {formatTimecode(currentTime)}
                     
                     {replyTarget ? (
-                      
+                      
                         Replying to {replyTarget.comment.author}
                       
                     ) : (