Merge pull request #1 from Bregor/feat/table-cells-overflow

feat: add configurable overflow-wrap for table cells

Author: Bregor

src/modules/_vars.css

@@ -16,6 +16,9 @@
   --vcw-set-callout-scale: 1.2; /* Callouts narrower than body text */
   --vcw-set-padding-scale: 1; /* Multiplier for padding in wide mode */
   --vcw-set-table-scale: 1; /* Multiplier for table width in wide mode */
+
+  --vcw-set-table-head-overflow-wrap: break-word; /* Overflow wrap style for table head cells */
+  --vcw-set-table-body-overflow-wrap: break-word; /* Overflow wrap style for table body cells */
 }
 
 /* -------------------------------
@@ -133,6 +136,28 @@ settings:
     max: 2
     step: 0.05
 
+  - id: vcw-set-table-body-overflow-wrap
+    title: Table body overflow wrap
+    description: "How long words wrap in table body cells. break-word: breaks words only if needed (recommended), normal: breaks only at spaces, anywhere: breaks at any character"
+    type: variable-select
+    scope: root
+    default: break-word
+    options:
+      - break-word
+      - normal
+      - anywhere
+
+  - id: vcw-set-table-head-overflow-wrap
+    title: Table head overflow wrap
+    description: "How long words wrap in table header cells. break-word: breaks words only if needed (recommended), normal: breaks only at spaces, anywhere: breaks at any character"
+    type: variable-select
+    scope: root
+    default: break-word
+    options:
+      - break-word
+      - normal
+      - anywhere
+
   - id: vcw-advanced-heading
     title: Advanced
     description: Fine-tune spacing and layout behavior

src/modules/preview.css

@@ -15,19 +15,29 @@
   */
   @container preview-readable (min-width: 0) {
     div.el-table {
+      /* Table wrapper */
       margin-inline: var(--container-table-margin) !important;
       max-width: var(--container-table-max-width);
       min-width: var(--vcw-set-min-width);
       width: var(--container-table-width);
       padding-inline: 0 !important;
-    }
-    div.el-table > table {
-      margin-inline: var(--table-margin) !important;
-      max-width: var(--table-max-width);
-      min-width: var(--table-min-width);
-      table-layout: auto;
-      width: var(--table-width);
-      padding-inline: 0 !important;
+      & > table {
+        /* Table */
+        margin-inline: var(--table-margin) !important;
+        max-width: var(--table-max-width);
+        min-width: var(--table-min-width);
+        table-layout: auto;
+        width: var(--table-width);
+        padding-inline: 0 !important;
+        & > thead > tr > th {
+          /* Table header cells */
+          overflow-wrap: var(--vcw-set-table-head-overflow-wrap);
+        }
+        & > tbody > tr > td {
+          /* Table data cells */
+          overflow-wrap: var(--vcw-set-table-body-overflow-wrap);
+        }
+      }
     }
 
     div.el-h1 {

src/modules/source.css

@@ -29,11 +29,17 @@
       padding-inline: 0 !important;
       max-width: var(--table-max-width);
       margin-inline: auto;
-    }
-    .table-wrapper > .table-editor {
-      max-width: var(--table-max-width);
-      width: var(--table-width);
-      margin-inline: 0 !important;
+      & > table.table-editor {
+        max-width: var(--table-max-width);
+        width: var(--table-width);
+        margin-inline: 0 !important;
+        & > thead > tr > th > .table-cell-wrapper {
+          overflow-wrap: var(--vcw-set-table-head-overflow-wrap);
+        }
+        & > tbody > tr > td > .table-cell-wrapper {
+          overflow-wrap: var(--vcw-set-table-body-overflow-wrap);
+        }
+      }
     }
   }