@inneropen/marvin-astro 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inneropen/marvin-astro",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Site integration for Marvin CMS on Astro — repositories, site chrome, and payload normalization",
   "type": "module",
   "exports": {

package/src/components/CookieTable.astro

@@ -70,6 +70,7 @@ const groups = COOKIE_CATEGORIES.filter((name) => !category || name === category
   <noscript><p class="marvin-privacy__notice">{labels.noscript}</p></noscript>
 )}
 {groups.map((group) => (
+  <div class="marvin-privacy__table-wrap">
   <table class={['marvin-privacy__table', 'marvin-privacy__table--cookies', className].filter(Boolean).join(' ')} data-category={group.name}>
     <caption>
       {labels.categories[group.name]}
@@ -94,4 +95,5 @@ const groups = COOKIE_CATEGORIES.filter((name) => !category || name === category
       ))}
     </tbody>
   </table>
+  </div>
 ))}

package/src/components/ProcessorTable.astro

@@ -28,6 +28,7 @@ const rows = (processors ?? []).map((processor) => ({
 ---
 
 {rows.length > 0 && (
+  <div class="marvin-privacy__table-wrap">
   <table class={['marvin-privacy__table', 'marvin-privacy__table--processors', className].filter(Boolean).join(' ')}>
     <thead>
       <tr>
@@ -59,4 +60,5 @@ const rows = (processors ?? []).map((processor) => ({
       ))}
     </tbody>
   </table>
+  </div>
 )}

package/src/components/privacy.css

@@ -20,6 +20,9 @@
 
 :where(.marvin-privacy) {
   display: grid;
+  /* A bare `1fr`/auto track grows to its widest child's min-content, so one wide table would push
+     the whole policy past the viewport. minmax(0, 1fr) keeps the track at the container's width. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--marvin-privacy-gap, 2rem);
 }
 
@@ -40,12 +43,21 @@
 
 :where(.marvin-privacy__facts dd) {
   margin: 0;
+  min-width: 0;
+  overflow-wrap: break-word;
 }
 
 :where(.marvin-privacy__notice, .marvin-privacy__reviewed) {
   color: var(--marvin-privacy-muted, color-mix(in srgb, currentColor 75%, transparent));
 }
 
+:where(.marvin-privacy__table-wrap) {
+  /* Safety net: if a table still cannot fit (many columns in a narrow column, a long URL in a
+     purpose cell) it scrolls inside its own box instead of stretching the page. */
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 :where(.marvin-privacy__table) {
   width: 100%;
   border-collapse: collapse;
@@ -69,6 +81,15 @@
   padding: var(--marvin-privacy-pad, 0.5rem 0.75rem);
   border-bottom: 1px solid var(--marvin-privacy-border, color-mix(in srgb, currentColor 20%, transparent));
   vertical-align: top;
+  /* Ordinary words wrap at normal break points. `break-word` (unlike `anywhere`) does not shrink a
+     column's min-content width, so a narrow column never splits a word that could sit on its own
+     line. Only an unbreakable token wider than its cell is broken, below. */
+  overflow-wrap: break-word;
+}
+
+/* Long unbreakable tokens (cookie names such as _ga_XXXXXXXX, addresses) may break anywhere, and
+   `anywhere` lets their column shrink so the table stays inside its container. */
+:where(.marvin-privacy__table code, .marvin-privacy__table a[href^="mailto:"], .marvin-privacy__facts a[href^="mailto:"]) {
   overflow-wrap: anywhere;
 }
 
@@ -93,6 +114,12 @@
     display: block;
   }
 
+  /* The caption is otherwise sized as a shrink-to-fit table-caption and wraps in a sliver. */
+  :where(.marvin-privacy__table caption) {
+    display: block;
+    width: 100%;
+  }
+
   :where(.marvin-privacy__table thead) {
     position: absolute;
     width: 1px;