jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-28 04:51:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Desktop #806 follow-ups: panel/inbox fixes + top-bar backdrop (#814)

Browse Source 
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
Wes
2026-06-02 08:45:04 -07:00
committed by GitHub
parent 5bed17a117
commit a25ca5d1bf
14 changed files with 400 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
desktop/src/shared/ui/OverlayPanelBackdrop.tsx
View File

@@ -13,9 +13,13 @@ export const PANEL_BASE_CLASS =
* Starts below the fixed top chrome (window drag region + global search and
* channel actions, ~44px tall) so the panel header doesn't collide with it at
* narrow widths. Matches the inline layout where the header sits below chrome.
*
* `h-auto` overrides the base `h-full`: with `fixed top-11 bottom-0`, height is
* driven by the top/bottom insets. Without it, `h-full` resolves to 100vh and
* the panel hangs below the viewport (100vh tall, but starting 44px down).
*/
export const PANEL_OVERLAY_CLASS =
"fixed bottom-0 right-0 top-11 z-40 shadow-xl max-w-[calc(100vw-2rem)]";
"fixed bottom-0 right-0 top-11 z-40 h-auto shadow-xl max-w-[calc(100vw-2rem)]";
/**
* Single-column panel headers should render above the local panel backdrop

26
desktop/src/shared/ui/TopChromeBackdrop.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { cn } from "@/shared/lib/cn";
/**
* Blurred strip pinned to the top of a scroll container so content scrolls
* *under* the global search chrome instead of showing through it.
*
* Render as the first child of a `relative` (non-scrolling) parent, alongside
* the scrollable content. It is purely decorative (aria-hidden,
* pointer-events-none) and sits at z-40 — below the global chrome controls
* (z-[45]) but above page content.
*
* Pass the height via `className` (e.g. `h-10` for pages with no sub-header,
* `h-[76px]` for panels whose own header occupies the top). `cn`/twMerge lets
* the passed height override the default.
*/
export function TopChromeBackdrop({ className }: { className?: string }) {
return (
<div
aria-hidden="true"
className={cn(
"pointer-events-none absolute inset-x-0 top-0 z-40 h-10 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",
className,
)}
/>
);
}