@cronos-labs/ui 0.7.0 → 0.7.2

package/dist/Footer/index.js

@@ -42,7 +42,14 @@ export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNaviga
     };
     const renderLegalLink = (link) => {
         if (link.isCookiePreferences) {
-            return (_jsx(FooterLegalButton, { id: "ot-sdk-btn", className: "ot-sdk-show-settings", type: "button", onClick: onOpenCookiePreferences, children: link.label }));
+            // Deliberately not OneTrust's `#ot-sdk-btn.ot-sdk-show-settings` hook:
+            // the SDK rewrites any element carrying it with the label configured in
+            // the OneTrust admin ("Cookies Settings"), replacing the localized copy
+            // and, on the Astro sites, changing the server-rendered text before the
+            // island hydrates — React then throws a hydration error and re-renders
+            // the whole tree on the client. `onOpenCookiePreferences` already opens
+            // the preference centre through the OneTrust API directly.
+            return (_jsx(FooterLegalButton, { type: "button", onClick: onOpenCookiePreferences, children: link.label }));
         }
         if (link.disabled) {
             return _jsx(FooterLegalText, { "aria-disabled": "true", children: link.label });

package/dist/Footer/styles.js

@@ -19,7 +19,12 @@ export const FooterContainer = styled.div `
   margin: 0 auto;
 
   ${({ theme }) => theme.mediaQueries.lg} {
-    width: min(calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInlineWide})), 1209px);
+    /* The same shell as HeaderShell: the landing wide width with 80px
+       gutters. It was 1209px, 13px wider than the header it sits under. */
+    width: min(
+      calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInlineWide})),
+      ${({ theme }) => theme.layout.landingWideWidth}
+    );
     margin: 0 auto;
   }
 `;
@@ -222,6 +227,10 @@ export const FooterLegalLink = styled.a `
     line-height: 1.3333;
   }
 `;
+// The `!important`s below date from when this button carried OneTrust's
+// `#ot-sdk-btn.ot-sdk-show-settings` hook and had to beat the SDK's own
+// button styles. The hook is gone (see Footer/index.tsx); they are kept for
+// now so this change stays limited to the label/hydration fix.
 export const FooterLegalButton = styled.button `
   display: inline !important;
   min-width: 0 !important;

package/dist/FooterWaitlist/styles.js

@@ -273,10 +273,20 @@ export const WaitlistSocialBlock = styled.div `
     margin-top: ${({ $variant }) => ($variant === 'footer' ? '10px' : '14px')};
   }
 `;
+/* Seven 32px icons. The row wraps and closes up to 16px below 768px:
+   at 24px it is 368px wide, wider than a 360px phone's 328px column, and
+   as it could not shrink it widened every ancestor up to the footer, so
+   the whole footer ran past the viewport and the page scrolled sideways. */
 export const WaitlistSocialLinks = styled.div `
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 24px;
+  gap: 16px;
+  min-width: 0;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    gap: 24px;
+  }
 `;
 export const WaitlistSocialLink = styled.a `
   display: inline-flex;

package/dist/Header/styles.js

@@ -93,6 +93,16 @@ export const HeaderShell = styled.header `
     calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInline})),
     ${({ theme }) => theme.layout.landingWideWidth}
   );
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    /* The same 80px gutter the footer and every page shell use from 1024px;
+       with only the 16px gutter the header sat 64px further out than the
+       content beneath it between 1024px and 1276px. */
+    width: min(
+      calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInlineWide})),
+      ${({ theme }) => theme.layout.landingWideWidth}
+    );
+  }
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronos-labs/ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Shared Header, Footer, Seo, locale and theme primitives for Cronos web properties.",
   "license": "UNLICENSED",
   "type": "module",