DP-3619 Responsive tables support

[czechian]

Summary by CodeRabbit

• New Features
  • Enhanced responsive tables with automatic restacking for compatible tables and improved detection of when tables are too wide.
  • Added an alternate stacked-table layout and improved overflow handling for tables that can’t be restacked.
• Bug Fixes
  • Improved responsiveness by recalculating layout using resize observation when available.
• Documentation
  • Added a new “Table Examples” page and expanded the tables documentation reference.
• Style
  • Updated dark-theme styling for Restables cloned table cells to improve readability.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8858eb16-98dd-4559-975b-39cae8d8154a

📥 Commits

Reviewing files that changed from the base of the PR and between d7e5981 and 909b0bb.

⛔ Files ignored due to path filters (1)

• static/js/restables.min.js is excluded by !**/*.min.js

📒 Files selected for processing (6)

• assets/scss/dark-theme/tables.scss
• assets/scss/tables.scss
• docs/_index.md
• docs/tables.md
• layouts/partials/hooks/body-end.html
• static/js/tables.js

🚧 Files skipped from review as they are similar to previous changes (5)

• assets/scss/dark-theme/tables.scss
• layouts/partials/hooks/body-end.html
• assets/scss/tables.scss
• docs/_index.md
• static/js/tables.js

---

📝 Walkthrough

Walkthrough

Adds Restables-based responsive table cloning, overflow-aware stacked layouts, clone-specific styling, script wiring, and documentation with table examples and fallback behavior.

Changes

Responsive table restacking

Layer / File(s)	Summary
Restables runtime and responsive detection static/js/tables.js, layouts/partials/hooks/body-end.html	Eligible tables are enhanced with Restables, responsive state is derived from overflow and visible tables, and ResizeObserver updates wrappers with a resize fallback.
Clone and stacked-table styling assets/scss/tables.scss, assets/scss/dark-theme/tables.scss	Cloned tables receive layout and first-column styling, while stacked mode switches visibility between origin and clone tables with dark-theme support.
Table examples and reference wiring docs/tables.md, docs/_index.md	A new table examples page documents formatting, responsive behavior, and fallback scrolling, and is added to the reference table.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant TablePage
  participant tablesjs
  participant Restables
  participant ResizeObserver
  TablePage->>tablesjs: initialize responsive table wrappers
  tablesjs->>Restables: enhance eligible tables
  ResizeObserver->>tablesjs: report wrapper width changes
  tablesjs->>Restables: switch stacked clone visibility

Loading

Poem

I’m a rabbit with tables that stretch and align,
Clones hop into view when the widths intertwine.
Gray cells glow softly in dark midnight hue,
Examples bloom brightly for readers to view.
Resize, restack—our burrows stay neat!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: adding responsive table support.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@assets/scss/dark-theme/tables.scss`:
- Around line 22-24: Update the .restables-clone tbody td:first-child selector
in the dark-theme table styles to set the foreground color to $color-white in
addition to its existing $color-gunpowder-gray background, preserving readable
cloned row labels in dark mode.

In `@docs/tables.md`:
- Line 80: Resolve the broken vertical-header reference in docs/tables.md by
either adding the advertised “Vertical header column” section/example or
removing its link and fallback wording; if removing it, also update the
vertical-header wording in docs/tables.md and align the navigation description
in docs/_index.md with the resulting page content.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a5290ec4-5ebb-4627-ae43-f012b32602f8

📥 Commits

Reviewing files that changed from the base of the PR and between e5bb4dd and d7e5981.

⛔ Files ignored due to path filters (1)

• static/js/restables.min.js is excluded by !**/*.min.js

📒 Files selected for processing (6)

• assets/scss/dark-theme/tables.scss
• assets/scss/tables.scss
• docs/_index.md
• docs/tables.md
• layouts/partials/hooks/body-end.html
• static/js/tables.js