@bearmenu/ui 0.8.10 → 0.8.11

package/src/components/venue-wall.tsx

@@ -42,6 +42,9 @@ export type VenueWallProps = {
   linkComponent?: MenuLinkComponent;
 };
 
+const WALL_CELLS = 18;
+const PHONE_CELLS = 6;
+
 export function VenueWall({
   places,
   hrefs,
@@ -64,8 +67,10 @@ export function VenueWall({
     >
       {tileUrls?.length ? (
         <>
-          <div aria-hidden className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-6">
-            {Array.from({ length: 18 }, (_, cell) => (
+          <div aria-hidden className="absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-6">
+            {/* Six cells on the phone, eighteen from `lg` — the hero's rule:
+                `hidden` keeps the lazy stills past the sixth from loading. */}
+            {Array.from({ length: WALL_CELLS }, (_, cell) => (
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 key={cell}
@@ -73,7 +78,7 @@ export function VenueWall({
                 alt=""
                 loading="lazy"
                 decoding="async"
-                className="h-full w-full object-cover"
+                className={cn("h-full w-full object-cover", cell >= PHONE_CELLS && "hidden lg:block")}
               />
             ))}
           </div>
@@ -151,7 +156,7 @@ export function VenueWall({
           );
 
           const chipClasses =
-            "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/10 py-1 pl-1 pr-3.5 backdrop-blur-[6px]";
+            "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/[0.14] py-1 pl-1 pr-3.5";
 
           return (
             <li key={place.slug}>

package/src/components/weekday-theme-banner.tsx

@@ -159,7 +159,7 @@ export function WeekdayThemeBanner({
           "relative z-[1] hidden border-t border-white/15 p-4 lg:block lg:min-w-[240px] lg:border-l lg:border-t-0 lg:p-5",
           // Over a photograph the rail needs its own ground, or seven lines of
           // small type land on whatever the plate happens to be.
-          imageUrl && "bg-black/45 backdrop-blur-[2px]"
+          imageUrl && "bg-black/55"
         )}
       >
         {weekLabel && (