fix(web): make mobile tab bar fully opaque

mayur-tolexo · mayur-tolexo · commit a51936b20105 · 2026-05-25T19:38:11.000+05:30
The frosted bg-cream/95 + backdrop-blur let scrolling content (e.g.
product thumbnails) bleed through and muddy the tab labels. Solid
bg-cream keeps the icons/labels crisp over any page content.
diff --git a/web/components/mobile-tab-bar.tsx b/web/components/mobile-tab-bar.tsx
@@ -28,7 +28,7 @@ export function MobileTabBar({ authed }: { authed: boolean }) {
   return (
     <nav
       aria-label="Mobile navigation"
-      className="fixed bottom-0 inset-x-0 z-30 border-t border-rule bg-cream/95 backdrop-blur sm:hidden"
+      className="fixed bottom-0 inset-x-0 z-30 border-t border-rule bg-cream sm:hidden"
       style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
     >
       <div className="flex items-stretch justify-around h-16 px-2">

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export function MobileTabBar({ authed }: { authed: boolean }) {`
`28`	`28`	`return (`
`29`	`29`	`<nav`
`30`	`30`	`aria-label="Mobile navigation"`
`31`		`- className="fixed bottom-0 inset-x-0 z-30 border-t border-rule bg-cream/95 backdrop-blur sm:hidden"`
	`31`	`+ className="fixed bottom-0 inset-x-0 z-30 border-t border-rule bg-cream sm:hidden"`
`32`	`32`	`style={{ paddingBottom: "env(safe-area-inset-bottom)" }}`
`33`	`33`	`>`
`34`	`34`	`<div className="flex items-stretch justify-around h-16 px-2">`