Remove pathLength/strokeDasharray/strokeDashoffset from the SVG mask,
which WebKit renders inconsistently. Use a simple full-path black
stroke instead — cross-browser safe with nearly identical visual result
at FAB size.
Planet body uses accent→primary diagonal gradient, ring uses
primary→accent horizontal gradient. Replaced generic drop-shadow-lg
with a primary-colored layered drop-shadow for a glowing float effect
that adapts to the current theme.
Update all CSS utilities referencing bottom nav height (bottom-fab,
bottom-mobile-nav, pb-overscroll, ai-chat-height, livestream-height,
vine-slide-height) from 3.5rem to 2.75rem.
Update all CSS utilities that reference the top bar height (top-mobile-bar,
-mt-mobile-bar, ai-chat-height, livestream-height, vine-slide-height) from
3rem to 2.5rem. Scale logo from 28px to 24px to fit.
Affects all shared tab bars (Follows/Ditto, Posts/Accounts,
All/Mentions, Follows/Global, etc.) via the single TabButton
component. Brings total height from ~48px to ~36px for a more
compact mobile experience.
- Use identical inline sticky classes as Feed.tsx instead of STICKY_HEADER_CLASS
- Remove sidebar:py-5 from TabButtons to match Feed's default sizing
- Move search input bar outside conditional tab content, rendered
always right after tabs (like ComposeBox on Feed page)
- Use px-4 py-3 to match ComposeBox container padding
- Share single SearchInput across both tabs instead of duplicating
- Conditionally show filter/save buttons only on posts tab
- Add flex-1 min-w-0 to <main> to match Feed page layout
- Reduce search input top padding on mobile (pt-2 vs pt-5) so it
sits directly below the Posts/Accounts tabs without a gap
- Keep desktop padding unchanged with sidebar:pt-5
- Hide decorative arc SVG on mobile (only show on desktop with sidebar:block)
- Reduce top padding on search input containers from pt-5 to pt-3 on mobile
- Keep desktop layout unchanged with sidebar:pt-5
Introduces a hasSubHeader layout option. Pages with their own
tab bars set hasSubHeader: true, suppressing the arc on the
mobile top bar. Pages without tab bars (Bookmarks, Trends, etc.)
get the arc on the logo header automatically, ensuring the
bottom-most header always has the curved element.
Updates the Trends header to use the same layout pattern as
Bookmarks, Treasures, and other feed pages with a back arrow
that links to home, hidden on desktop.
Removes sticky behavior, backdrop blur, and background from the
header. Uses the same plain header style with back arrow, icon,
and title as Treasures and other feed pages.
Repositions the header prop in the Feed component to render
after the tabs and ComposeBox instead of before them. This
applies to all pages using Feed via KindFeedPage including
Treasures, Emoji Packs, Music, Podcasts, Badges, Articles,
Polls, Colors, Decks, and WebXDC.
Repositions the title/back-arrow header beneath the Follows/Global
tabs on all kind-specific feed pages, matching the layout pattern
established on the main feed and Themes pages.
Places the title/back-arrow header beneath the My Themes/Follows/
Global tabs instead of between the logo header and tabs, matching
the main feed layout pattern.
Applies the same curved arc treatment to Photos, Videos, Vines,
Events, Books, and Themes feed pages — removing the flat bottom
border and adding an SVG semi-ellipse below the Follows/Global
tabs, consistent with the main feed and notifications pages.
Wraps the -mt-mobile-bar styles in a max-width: 899px media
query so the negative margin and padding only apply when the
mobile top bar is visible. Desktop layout is unaffected.
Removes the fixed backing layer approach. Instead, pulls the
content area up behind the mobile header with a negative margin
and compensating padding. The content's bg-background/85 now
extends behind the header at all scroll positions, giving the
same double-opacity look as the tab bar without any stacking
issues.
Lowers the fixed backing layer to z-index 1 and adds z-10 to
the main content area. When at the top of the page, the backing
provides the 85% opacity behind the header. When scrolled, the
content area (z-10) occludes the backing (z-1), so only one
layer of 85% is ever behind the header — matching the tab bar.
Adds a fixed bg-background/85 div at z-index 19 that stays at
the viewport top, while the sticky header sits at z-20 on top.
This ensures the header has the same double-opacity density as
the tab bar at all scroll positions without getting darker when
content scrolls behind it.
Adds a bg-background/85 layer behind the bg-background/80 layer
in the top header, matching the double-opacity effect that the
tab bar gets from sitting over the main content area. This
ensures consistent visual density regardless of scroll position.
Replaces the separate drawer + arc background approach with a
single div spanning both areas, clipped with an SVG clipPath
that defines the rectangle + curved edge shape. The background
image flows seamlessly through the drawer and into the arc
with no seam.
Moves the arc from the generic Sheet component into MobileDrawer
so it can inherit the theme background image. Uses clip-path
ellipse on an HTML div instead of SVG fill, with the same
bg-background/70 overlay applied when a background image is set.
Increases the arc width from 20px to 36px with a deeper curve,
and changes fill from background/80 to solid background to
match the drawer's actual background color.
Removes the flat right border from the left sheet variant and
adds an SVG arc that curves outward along the right edge,
matching the curved styling used on the horizontal nav bars.
Replaces the flat right border with an SVG arc that curves
outward along the full height of the drawer, matching the
curved design language used on the nav bars.
Replaces the background-colored stroke hack with an SVG mask
that cuts the ring path out of the planet body, making the gap
genuinely see-through to whatever is behind the button.
Draws the ring path twice: first with a wider background stroke
to carve a visible gap where it crosses the planet body, then
the accent ring on top. This makes the ring distinct from the body.
Reorders SVG elements so the ring is rendered first and the
filled planet body is drawn on top, occluding the ring where
it crosses. This gives a natural Saturn-like appearance.
Uses the Saturn planet SVG as the button shape instead of a
plain circle. The planet body and ring are filled with the
accent color, and the plus icon remains centered on the body.
Switches all sticky headers, bottom nav, and decorative arcs from
bg-background/80 + backdrop-blur-md to solid bg-background. This
unifies the bars and their curved extensions into visually cohesive
elements with no blur seams or transparency mismatches.
Same treatment as the mobile bottom nav: an SVG arc hangs below
the Follows/Ditto/Global tab bar, removing the flat border so
the tabs flow into the content with a smooth curved edge.
Adds an SVG arc on top of the MobileBottomNav that blends
seamlessly with the nav bar, creating a unified curved element.
Removes the top border so they feel like one continuous shape.
Repositions the 'What's on your mind?' ComposeBox to render
after the Follows/Ditto/Global tab bar instead of above it,
so the tab navigation stays directly under the top header.
Lemon