From de666580ceab84e7df53e607ed03771986db9444 Mon Sep 17 00:00:00 2001
From: Maxim Filatov <maxim.filatov@semrush.com>
Date: Sun, 26 Oct 2025 14:24:12 +0100
Subject: [PATCH] feat: add configurable overflow-wrap for table cells

Add user-configurable overflow-wrap behavior for table header and body
cells to prevent horizontal overflow with long, unbreakable content.

**Changes**
New CSS variables
- `--vcw-set-table-head-overflow-wrap`: Controls word wrapping in table
  header cells (default: break-word)
- `--vcw-set-table-body-overflow-wrap`: Controls word wrapping in table
  body cells (default: break-word)

Style Settings integration
- Added "Table head overflow wrap" dropdown setting with three options:
  - `break-word` (recommended): Breaks words only when necessary
  - `normal`: Only breaks at spaces (standard behavior)
  - `anywhere`: Breaks at any character to prevent overflow
- Added "Table body overflow wrap" dropdown setting with same options
- Enhanced descriptions with inline explanations for better UX

CSS improvements
- Refactored `preview.css`: nested table selectors for better maintainability
- Refactored `source.css`: nested table editor selectors
- Applied `overflow-wrap` to both preview mode (`div.el-table > table`) and
  source/editor mode (`.table-wrapper > table.table-editor`)
- Targeted specific cell wrappers for precise control

**Motivation**
Tables with long URLs, code snippets, or compound words can cause
horizontal overflow, breaking the reading experience especially in
narrow panels. This change gives users control over how content wraps
while maintaining a sensible default (break-word) that prevents overflow
without being overly aggressive.
---
 src/modules/_vars.css   | 25 +++++++++++++++++++++++++
 src/modules/preview.css | 26 ++++++++++++++++++--------
 src/modules/source.css  | 16 +++++++++++-----
 3 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/modules/_vars.css b/src/modules/_vars.css
index 14ad54f..7b56228 100644
--- a/src/modules/_vars.css
+++ b/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
diff --git a/src/modules/preview.css b/src/modules/preview.css
index 63f874d..10c0eec 100644
--- a/src/modules/preview.css
+++ b/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 {
diff --git a/src/modules/source.css b/src/modules/source.css
index c62dedd..2a64181 100644
--- a/src/modules/source.css
+++ b/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);
+        }
+      }
     }
   }