@bygghammar/cms-platform 0.77.0 → 0.78.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.78.0
+
+- Countdown block: the unit tiles now always stay on a single row on mobile.
+  Tiles shrink to fit (with smaller mobile padding, digits, labels and gaps)
+  instead of wrapping; desktop sizing and all colour/layout settings unchanged.
+
 ## 0.77.0
 
 - Global Sections list: preview thumbnails now use the section's first block type

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.77.0",
+  "version": "0.78.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/blocks/components/CountdownBlock.tsx

@@ -10,12 +10,28 @@ import { useCountdownReplacement } from "../countdown-replacement";
 import type { CountdownProps } from "../types";
 
 const TILE_SIZE = {
-  sm: { box: "min-w-14 px-3 py-2.5", digit: "text-2xl md:text-3xl", unit: "text-[0.55rem]" },
-  md: { box: "min-w-20 px-4 py-3.5", digit: "text-3xl md:text-5xl", unit: "text-[0.6rem]" },
-  lg: { box: "min-w-28 px-6 py-5", digit: "text-4xl md:text-6xl", unit: "text-[0.68rem]" },
+  sm: {
+    box: "min-w-0 flex-1 px-2 py-2 sm:min-w-14 sm:flex-none sm:px-3 sm:py-2.5",
+    digit: "text-xl sm:text-2xl md:text-3xl",
+    unit: "text-[0.5rem] sm:text-[0.55rem]",
+  },
+  md: {
+    box: "min-w-0 flex-1 px-2 py-2.5 sm:min-w-20 sm:flex-none sm:px-4 sm:py-3.5",
+    digit: "text-2xl sm:text-3xl md:text-5xl",
+    unit: "text-[0.5rem] sm:text-[0.6rem]",
+  },
+  lg: {
+    box: "min-w-0 flex-1 px-2 py-3 sm:min-w-28 sm:flex-none sm:px-6 sm:py-5",
+    digit: "text-2xl sm:text-4xl md:text-6xl",
+    unit: "text-[0.5rem] sm:text-[0.68rem]",
+  },
 } as const;
 
-const GAP = { sm: "gap-2", md: "gap-3 md:gap-4", lg: "gap-5 md:gap-7" } as const;
+const GAP = {
+  sm: "gap-1.5 sm:gap-2",
+  md: "gap-1.5 sm:gap-3 md:gap-4",
+  lg: "gap-2 sm:gap-5 md:gap-7",
+} as const;
 const PADDING = {
   compact: "py-8 md:py-10",
   normal: "py-14 md:py-20",
@@ -149,11 +165,12 @@ export function CountdownBlock({ props: p }: { props: CountdownProps }) {
     <>
       {heading(p.title, p.body)}
       <div
-        className={`mt-8 flex flex-wrap items-stretch ${GAP[p.gap ?? "md"]} ${align.row}`}
+        className={`mt-8 flex w-full flex-nowrap items-stretch sm:w-auto sm:flex-wrap ${GAP[p.gap ?? "md"]} ${align.row}`}
         aria-live="off"
       >
         {units.map((u, i) => (
-          <div key={i} className="flex items-stretch">
+          <div key={i} className="flex min-w-0 flex-1 items-stretch sm:flex-none">
+
             <div
               className={`flex flex-col items-center justify-center bg-[var(--cd-tile-bg)] ${size.box} ${border} ${shadow}`}
               style={{ borderRadius: "var(--cd-radius)" }}