From bd4f8ba6be392ce2a266c24dcd4e83d2a003a3da Mon Sep 17 00:00:00 2001 From: Thomas Petersen Date: Fri, 19 Jun 2026 10:12:06 -0400 Subject: [PATCH 1/4] fix(desktop): lower sidebar unread overflow pill Position the top sidebar unread overflow pill below the global chrome so it no longer overlaps the window controls. --- desktop/src/features/sidebar/ui/AppSidebar.tsx | 1 + desktop/src/features/sidebar/ui/MoreUnreadButton.tsx | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx index 98b8ee6052..a385ca7251 100644 --- a/desktop/src/features/sidebar/ui/AppSidebar.tsx +++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx @@ -490,6 +490,7 @@ export function AppSidebar({ onClick={scrollToNextAbove} position="top" testId="sidebar-more-unread-above" + topClassName="top-(--buzz-top-chrome-height,2.5rem)" /> ) : null} void; position: "top" | "bottom"; testId: string; + topClassName?: string; }) { + const positionClassName = position === "top" ? topClassName : bottomClassName; + return (
Date: Fri, 19 Jun 2026 10:16:22 -0400 Subject: [PATCH 2/4] fix(desktop): align unread pill styling Match unread message pills to the neutral date-divider treatment while preserving the pill-shaped corners. --- desktop/src/shared/ui/UnreadPill.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desktop/src/shared/ui/UnreadPill.tsx b/desktop/src/shared/ui/UnreadPill.tsx index 50f481c0b3..153e614787 100644 --- a/desktop/src/shared/ui/UnreadPill.tsx +++ b/desktop/src/shared/ui/UnreadPill.tsx @@ -3,7 +3,7 @@ import { ArrowDown, ArrowUp } from "lucide-react"; import { Button } from "@/shared/ui/button"; const UNREAD_PILL_CLASS = - "pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-primary/40 bg-primary/10 px-2.5 text-2xs font-medium text-primary shadow-xs backdrop-blur-sm hover:bg-primary/20 [&_svg]:size-4"; + "pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-border/70 bg-background/95 px-2 py-1 text-2xs font-medium tracking-[0.02em] text-muted-foreground/70 shadow-xs backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-4"; export function unreadCountLabel(count: number) { return `${count} new message${count === 1 ? "" : "s"}`; From 96f9323ea7755de08ec8e1264ea66e43428358fb Mon Sep 17 00:00:00 2001 From: Thomas Petersen Date: Fri, 19 Jun 2026 10:19:30 -0400 Subject: [PATCH 3/4] fix(desktop): align sidebar unread pill with footer Measure the sidebar footer so the bottom unread overflow pill sits just above the actual footer edge instead of relying on hardcoded offsets. --- .../src/features/sidebar/ui/AppSidebar.tsx | 49 ++++++++++++++----- 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx index a385ca7251..e6f0d44645 100644 --- a/desktop/src/features/sidebar/ui/AppSidebar.tsx +++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx @@ -229,21 +229,34 @@ export function AppSidebar({ React.useState(false); const showSidebarUpdateCard = canShowSidebarUpdateCard && !isSidebarUpdateCardDismissed; - const sidebarFooterCardCount = - (sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? 1 : 0) + - (showSidebarUpdateCard ? 1 : 0); - const unreadBelowBottomClass = - sidebarFooterCardCount >= 2 - ? "bottom-56" - : sidebarFooterCardCount >= 1 - ? "bottom-44" - : "bottom-24"; const [isNewDmOpenInternal, setIsNewDmOpenInternal] = React.useState(false); const isNewDmOpen = isNewDmOpenProp ?? isNewDmOpenInternal; const setIsNewDmOpen = onNewDmOpenChange ?? setIsNewDmOpenInternal; const scrollRef = React.useRef(null); + const sidebarFooterRef = React.useRef(null); + const [sidebarFooterHeight, setSidebarFooterHeight] = React.useState< + number | null + >(null); useSidebarScrollLock(scrollRef); + React.useLayoutEffect(() => { + const sidebarFooter = sidebarFooterRef.current; + if (!sidebarFooter) { + return; + } + + const updateFooterHeight = () => { + setSidebarFooterHeight(sidebarFooter.getBoundingClientRect().height); + }; + + updateFooterHeight(); + + const resizeObserver = new ResizeObserver(updateFooterHeight); + resizeObserver.observe(sidebarFooter); + + return () => resizeObserver.disconnect(); + }, []); + React.useEffect(() => { const scrollElement = scrollRef.current; if (!scrollElement) return; @@ -483,7 +496,16 @@ export function AppSidebar({ data-testid="app-sidebar" variant="sidebar" > -
+
{unreadAboveCount > 0 ? ( 0 ? ( ) : null} - + {sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? ( Date: Fri, 19 Jun 2026 10:26:27 -0400 Subject: [PATCH 4/4] fix(desktop): anchor sidebar unread pill to footer Use the footer container as the positioning anchor for the bottom unread pill instead of measuring footer height in React. --- .../src/features/sidebar/ui/AppSidebar.tsx | 150 +++++++----------- 1 file changed, 59 insertions(+), 91 deletions(-) diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx index e6f0d44645..cffac0032f 100644 --- a/desktop/src/features/sidebar/ui/AppSidebar.tsx +++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx @@ -233,30 +233,8 @@ export function AppSidebar({ const isNewDmOpen = isNewDmOpenProp ?? isNewDmOpenInternal; const setIsNewDmOpen = onNewDmOpenChange ?? setIsNewDmOpenInternal; const scrollRef = React.useRef(null); - const sidebarFooterRef = React.useRef(null); - const [sidebarFooterHeight, setSidebarFooterHeight] = React.useState< - number | null - >(null); useSidebarScrollLock(scrollRef); - React.useLayoutEffect(() => { - const sidebarFooter = sidebarFooterRef.current; - if (!sidebarFooter) { - return; - } - - const updateFooterHeight = () => { - setSidebarFooterHeight(sidebarFooter.getBoundingClientRect().height); - }; - - updateFooterHeight(); - - const resizeObserver = new ResizeObserver(updateFooterHeight); - resizeObserver.observe(sidebarFooter); - - return () => resizeObserver.disconnect(); - }, []); - React.useEffect(() => { const scrollElement = scrollRef.current; if (!scrollElement) return; @@ -496,16 +474,7 @@ export function AppSidebar({ data-testid="app-sidebar" variant="sidebar" > -
+
{unreadAboveCount > 0 ? ( - {unreadBelowCount > 0 ? ( - - ) : null} +
+ {unreadBelowCount > 0 ? ( + + ) : null} - - - {sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? ( - + + + {sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? ( + + ) : null} + + {showSidebarUpdateCard ? ( +
+ setIsSidebarUpdateCardDismissed(true)} + /> +
) : null} - - {showSidebarUpdateCard ? ( -
- setIsSidebarUpdateCardDismissed(true)} - /> -
- ) : null} - - - - - - + + + + + + +