mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
fix(desktop): apply Buzz sidebar overrides to the portaled mobile sheet
The token/active-pill/hover/search overrides in theme.css are scoped to [data-testid="app-sidebar"], but on narrow viewports (<768px) the mobile Sidebar branch spread that marker onto the Radix Sheet root, which renders no DOM ancestor of the portaled SheetContent. So the offcanvas sidebar got the Buzz gradient (fixed separately) but its selected rows and search box still fell back to the normal accent/grey surfaces over the gradient. Move the app-sidebar marker (and the rest of the forwarded props) onto SheetContent so every existing [data-testid="app-sidebar"] rule reaches the portaled sheet without duplicating selectors. Bump the sidebar.tsx file-size override by 1 (vendored file already on the split-queue). Verified at a 480px viewport: the sheet carries data-testid=app-sidebar, --sidebar-active resolves to white, and the Buzz Dark gradient still applies. Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
parent
de1604ddb9
commit
341aae05f8
@@ -217,7 +217,11 @@ const overrides = new Map([
|
||||
// +33 for config-nudge detect-and-render + author-auth gate (normalizePubkey guard).
|
||||
["src/shared/ui/markdown.tsx", 2152],
|
||||
["src/shared/ui/VideoPlayer.tsx", 2199],
|
||||
["src/shared/ui/sidebar.tsx", 1042],
|
||||
// +1: mobile Sidebar branch forwards the app-sidebar marker (and the rest of
|
||||
// the container props) onto SheetContent instead of the DOM-less Sheet root,
|
||||
// so the Buzz sidebar CSS overrides reach the portaled offcanvas sheet.
|
||||
// Load-bearing correctness fix, not generic debt. Queued to split.
|
||||
["src/shared/ui/sidebar.tsx", 1043],
|
||||
// permission-outcome (fix #1381 regression): pendingPermissions state map,
|
||||
// describePermissionOutcome helper, jsonRpcId key helper (handles both
|
||||
// string and finite-number JSON-RPC ids per spec), and the acp_write
|
||||
|
||||
@@ -297,6 +297,12 @@
|
||||
* the selected persona row in PersonaCatalogDialog). A root-level override
|
||||
* turned those white (white-on-white under Buzz Dark); scoping keeps them on
|
||||
* the normal accent-driven active colors.
|
||||
*
|
||||
* Covers the mobile/offcanvas sidebar too: `Sidebar` (shared/ui/sidebar.tsx)
|
||||
* renders the `data-testid="app-sidebar"` marker on `SheetContent` in its
|
||||
* mobile branch, so this container scope — and every other
|
||||
* `[data-testid="app-sidebar"]` rule below (hover, search box) — reaches the
|
||||
* portaled sheet, not just the desktop `<div>` sidebar.
|
||||
*/
|
||||
:root[data-buzz-sidebar] [data-testid="app-sidebar"] {
|
||||
--sidebar-active: 0 0% 100% !important;
|
||||
|
||||
@@ -319,11 +319,12 @@ const Sidebar = React.forwardRef<
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-mobile="true"
|
||||
className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||
{...props}
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
|
||||
Reference in New Issue
Block a user