From 117243e663fb4cb96f1c6e188c0f0cc645069a96 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Sun, 31 May 2026 13:39:50 -0400
Subject: [PATCH] Refine desktop rounded content layout

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 desktop/src/app/AppShell.tsx                  |  6 +-
 desktop/src/features/chat/ui/ChatHeader.tsx   |  2 +-
 .../src/features/home/ui/InboxDetailPane.tsx  | 82 +++++++++----------
 .../src/features/home/ui/InboxListPane.tsx    | 80 +++++++++---------
 .../features/messages/ui/MessageTimeline.tsx  |  4 +-
 5 files changed, 87 insertions(+), 87 deletions(-)

diff --git a/desktop/src/app/AppShell.tsx b/desktop/src/app/AppShell.tsx
index c791acdfe5..26b45a07f9 100644
--- a/desktop/src/app/AppShell.tsx
+++ b/desktop/src/app/AppShell.tsx
@@ -787,8 +787,10 @@ export function AppShell() {
                   unreadChannelIds={unreadChannelIds}
                 />
 
-                <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
-                  <Outlet />
+                <SidebarInset className="min-h-0 min-w-0 overflow-hidden bg-transparent px-3 pb-3 pt-12">
+                  <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden rounded-[28px] border border-border/70 bg-background/82 shadow-[0_24px_80px_rgba(0,0,0,0.12)] backdrop-blur-xl dark:border-white/10 dark:bg-background/60 dark:shadow-[0_24px_90px_rgba(0,0,0,0.45)]">
+                    <Outlet />
+                  </div>
                 </SidebarInset>
 
                 <AppShellOverlays
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 1874883800..107c40a4ad 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -150,7 +150,7 @@ export function ChatHeader({
   }
 
   return (
-    <div className="relative z-30 h-[76px] -mb-[76px] bg-background/80 pt-[42px] backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55">
+    <div className="absolute inset-x-0 top-0 z-30 h-12 bg-background/80 pt-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55">
       {header}
     </div>
   );
diff --git a/desktop/src/features/home/ui/InboxDetailPane.tsx b/desktop/src/features/home/ui/InboxDetailPane.tsx
index 53a92484a5..678316c823 100644
--- a/desktop/src/features/home/ui/InboxDetailPane.tsx
+++ b/desktop/src/features/home/ui/InboxDetailPane.tsx
@@ -212,51 +212,49 @@ export function InboxDetailPane({
       ref={detailPaneRef}
     >
       <div className="relative min-h-0 flex-1 overflow-hidden">
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[76px] bg-background/75 backdrop-blur-md supports-[backdrop-filter]:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35"
-        />
-        <div className="absolute inset-x-0 top-[38px] z-50 flex min-h-[32px] items-center justify-between gap-3 py-[4px] pl-6 pr-3">
-          <div className="min-w-0">
-            {canOpenChannel && contextChannelId && onOpenContext ? (
-              <button
-                className="flex min-w-0 items-center gap-[4px] text-left text-sm font-semibold leading-5 tracking-tight text-foreground hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                onClick={() => onOpenContext(contextChannelId, item.id)}
-                title={item.fullTimestampLabel}
-                type="button"
-              >
-                {hasChannelContext ? (
-                  <Hash className="h-[14px] w-[14px] shrink-0" color="gray" />
-                ) : null}
-                <span className="min-w-0 truncate">{contextLabel}</span>
-              </button>
-            ) : (
-              <h2
-                className="flex min-w-0 items-center gap-[4px] text-sm font-semibold leading-5 tracking-tight text-foreground"
-                title={item.fullTimestampLabel}
-              >
-                {hasChannelContext ? (
-                  <Hash className="h-[14px] w-[14px] shrink-0" color="gray" />
-                ) : null}
-                <span className="min-w-0 truncate">{contextLabel}</span>
-              </h2>
-            )}
-          </div>
-
-          <TooltipProvider delayDuration={200}>
-            <div className="flex shrink-0 items-center gap-1">
-              <HeaderMoreMenu
-                canDelete={canDelete}
-                isDeletingMessage={isDeletingMessage}
-                isDone={isDone}
-                onDelete={onDelete}
-                onToggleDone={onToggleDone}
-              />
+        <div className="absolute inset-x-0 top-0 z-50 h-12 bg-background/80 pt-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55">
+          <div className="flex min-h-[32px] items-start justify-between gap-3 py-[4px] pl-6 pr-3">
+            <div className="min-w-0">
+              {canOpenChannel && contextChannelId && onOpenContext ? (
+                <button
+                  className="flex min-w-0 items-center gap-[4px] text-left text-sm font-semibold leading-5 tracking-tight text-foreground hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  onClick={() => onOpenContext(contextChannelId, item.id)}
+                  title={item.fullTimestampLabel}
+                  type="button"
+                >
+                  {hasChannelContext ? (
+                    <Hash className="h-[14px] w-[14px] shrink-0" color="gray" />
+                  ) : null}
+                  <span className="min-w-0 truncate">{contextLabel}</span>
+                </button>
+              ) : (
+                <h2
+                  className="flex min-w-0 items-center gap-[4px] text-sm font-semibold leading-5 tracking-tight text-foreground"
+                  title={item.fullTimestampLabel}
+                >
+                  {hasChannelContext ? (
+                    <Hash className="h-[14px] w-[14px] shrink-0" color="gray" />
+                  ) : null}
+                  <span className="min-w-0 truncate">{contextLabel}</span>
+                </h2>
+              )}
             </div>
-          </TooltipProvider>
+
+            <TooltipProvider delayDuration={200}>
+              <div className="flex shrink-0 items-center gap-1">
+                <HeaderMoreMenu
+                  canDelete={canDelete}
+                  isDeletingMessage={isDeletingMessage}
+                  isDone={isDone}
+                  onDelete={onDelete}
+                  onToggleDone={onToggleDone}
+                />
+              </div>
+            </TooltipProvider>
+          </div>
         </div>
 
-        <div className="absolute inset-0 overflow-y-auto overscroll-contain pb-32 pt-[76px]">
+        <div className="absolute inset-0 overflow-y-auto overscroll-contain pb-32 pt-12">
           <div>
             {isThreadContextLoading ? (
               <div className="px-6 pb-3 text-[11px] text-muted-foreground">
diff --git a/desktop/src/features/home/ui/InboxListPane.tsx b/desktop/src/features/home/ui/InboxListPane.tsx
index 215ae1bc06..47bc45961a 100644
--- a/desktop/src/features/home/ui/InboxListPane.tsx
+++ b/desktop/src/features/home/ui/InboxListPane.tsx
@@ -46,51 +46,51 @@ export function InboxListPane({
 
   return (
     <section className="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background/60">
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[76px] bg-background/75 backdrop-blur-md supports-[backdrop-filter]:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35"
-      />
-      <div className="absolute inset-x-0 top-[42px] z-50 min-h-[32px] px-5 py-[4px]">
-        <div className="flex min-w-0 items-center justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-[6px]">
-            <Inbox className="h-[14px] w-[14px] shrink-0 text-muted-foreground" />
-            <h2 className="truncate text-sm font-semibold leading-5 tracking-tight">
-              Inbox
-            </h2>
+      <div className="absolute inset-x-0 top-0 z-50 h-12 bg-background/80 pt-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55">
+        <div className="min-h-[32px] px-5 py-[4px]">
+          <div className="flex min-w-0 items-center justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-[6px]">
+              <Inbox className="h-[14px] w-[14px] shrink-0 text-muted-foreground" />
+              <h2 className="truncate text-sm font-semibold leading-5 tracking-tight">
+                Inbox
+              </h2>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full border-border/70 bg-background/70 px-2.5 text-[11px] font-medium leading-[1] text-muted-foreground shadow-xs backdrop-blur-sm hover:bg-muted/60 hover:text-foreground"
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  <span>{activeFilter?.label ?? "All"}</span>
+                  <ChevronDown className="h-3 w-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="min-w-[10rem]">
+                <DropdownMenuRadioGroup
+                  onValueChange={(value) =>
+                    onFilterChange(value as InboxFilter)
+                  }
+                  value={filter}
+                >
+                  {FILTER_OPTIONS.map((option) => (
+                    <DropdownMenuRadioItem
+                      key={option.value}
+                      value={option.value}
+                    >
+                      {option.label}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full border-border/70 bg-background/70 px-2.5 text-[11px] font-medium leading-[1] text-muted-foreground shadow-xs backdrop-blur-sm hover:bg-muted/60 hover:text-foreground"
-                size="sm"
-                type="button"
-                variant="outline"
-              >
-                <span>{activeFilter?.label ?? "All"}</span>
-                <ChevronDown className="h-3 w-3" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="min-w-[10rem]">
-              <DropdownMenuRadioGroup
-                onValueChange={(value) => onFilterChange(value as InboxFilter)}
-                value={filter}
-              >
-                {FILTER_OPTIONS.map((option) => (
-                  <DropdownMenuRadioItem
-                    key={option.value}
-                    value={option.value}
-                  >
-                    {option.label}
-                  </DropdownMenuRadioItem>
-                ))}
-              </DropdownMenuRadioGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
         </div>
       </div>
 
       <div
-        className="min-h-0 flex-1 overflow-y-auto overscroll-contain pt-[76px]"
+        className="min-h-0 flex-1 overflow-y-auto overscroll-contain pt-12"
         data-testid="home-inbox-list"
       >
         {items.length === 0 ? (
diff --git a/desktop/src/features/messages/ui/MessageTimeline.tsx b/desktop/src/features/messages/ui/MessageTimeline.tsx
index 4ebef8f80c..f673573e61 100644
--- a/desktop/src/features/messages/ui/MessageTimeline.tsx
+++ b/desktop/src/features/messages/ui/MessageTimeline.tsx
@@ -143,14 +143,14 @@ export const MessageTimeline = React.memo(function MessageTimeline({
     <TooltipProvider delayDuration={200}>
       <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         <div
-          className="absolute inset-0 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-24 pt-1 [overflow-anchor:none] sm:px-6"
+          className="absolute inset-0 overflow-y-auto overflow-x-hidden overscroll-contain pb-24 pt-1 [overflow-anchor:none]"
           data-scroll-restoration-id={scrollRestorationId}
           data-testid="message-timeline"
           onScroll={syncScrollState}
           ref={scrollContainerRef}
         >
           <div
-            className="flex w-full flex-col gap-2 pt-[76px]"
+            className="flex w-full flex-col gap-2 px-4 pt-12 sm:px-6"
             ref={contentRef}
           >
             <div ref={topSentinelRef} aria-hidden className="h-px" />