@happeouikit/content-renderer 3.2.12 → 3.2.13

package/dist/index.cjs.js

@@ -251,13 +251,11 @@
     width: 100%;
     margin: var(--space-md) 0;
     text-align: left;
-    border-collapse: collapse; // doubles internal borders, but needed to allow more customization
-    thead th {
-      background: rgba(0, 0, 0, 0.1);
-    }
-    th,
-    td {
-      padding: 0.5em;
+    border-spacing: 0;
+    border-collapse: separate; // doubles internal borders, but needed to allow more customization
+    table-layout: fixed; // allows overflowing cells to have internal scroll bars
+    > tbody > tr > td {
+      padding: 0.25em 0.5em;
       border: 0.5px solid rgba(0, 0, 0, 0.12);
       &.fr-selected-cell {
         border: 0.5px solid var(--color-active-primary);
@@ -280,27 +278,22 @@
           text-decoration: line-through !important;
         }
       }
-      &.cell-disable-break-word {
-        // v2-widgets apply word-break: break-word, this allows users to override it
-        word-break: normal;
-      }
     }
     // to "cancel" the separate borders style, we halve all borders to 0.5px
     // but override with 1px for external borders 
-    & {
+    & > tbody > {
         tr:first-child > td { border-top-width: 1px; }
         tr:last-child > td { border-bottom-width: 1px; }
         tr > td:first-child { border-left-width: 1px; }
         tr > td:last-child { border-right-width: 1px; }
     }
-    &.invisible-borders {
-      th:not(.fr-selected-cell),
+    &.invisible-borders > tbody > tr > {
       td:not(.fr-selected-cell) {
         // keeping a transparent border so that selection doesn't push things by 1 pixel
         border: 1px dashed transparent;
       }
     }
-    &.alternating-rows {
+    &.alternating-rows > tbody > {
       tr:nth-child(odd) {
         background: rgba(255, 255, 255, 0.05);
       }
@@ -308,7 +301,7 @@
         background: rgba(0, 0, 0, 0.05);
       }
     }
-    &.round-corners {
+    &.round-corners > tbody > {
       tr:first-child { border-radius: 6px 6px 0 0; }
       tr:first-child > td:first-child { border-top-left-radius: 6px; }
       tr:first-child > td:last-child { border-top-right-radius: 6px; }
@@ -316,12 +309,12 @@
       tr:last-child > td:first-child { border-bottom-left-radius: 6px; }
       tr:last-child > td:last-child { border-bottom-right-radius: 6px; }
     }
-    &.highlight-first-row {
+    &.highlight-first-row > tbody > {
       tr:first-child > td {
         font-weight: bold;
       }
     }
-    &.highlight-first-column {
+    &.highlight-first-column > tbody > {
       tr > td:first-child { 
         font-weight: bold;
       }