feat(docs): enable popout modal for large tables#693
Merged
OrlinVasilev merged 4 commits intogoharbor:mainfrom Mar 2, 2026
Merged
feat(docs): enable popout modal for large tables#693OrlinVasilev merged 4 commits intogoharbor:mainfrom
OrlinVasilev merged 4 commits intogoharbor:mainfrom
Conversation
Signed-off-by: Iam-karan-suresh <karansuresh.info@gmail.com>
This would improve usability on just about any screen size. Tables are pretty much unusable due to horizontal scrolling, while half of my screen is just whitespace... 
|
There was a problem hiding this comment.
Pull request overview
This PR adds a pop-out modal feature for wide documentation tables to improve readability — especially on smaller screens — by letting users view tables at full viewport size without horizontal scrolling. It introduces a new JavaScript file, registers it globally, and adds the supporting CSS styles.
Changes:
- New
static/js/table-popout.js: Wraps.content tableelements with a scroll container and an "enlarge" button; clicking it opens a full-screen modal with a cloned copy of the table. - Updated
layouts/partials/javascript.html: Loads the new script globally on every page. - Updated
assets/sass/helpers.sass: Adds styles for the table wrapper, scroll container, enlarge button, modal, overlay, and close button; also removes trailing whitespace on existing lines.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 9 comments.
| File | Description |
|---|---|
static/js/table-popout.js |
Core logic: wraps all content tables, handles enlarge button, clones table into modal, manages keyboard/click-to-close |
layouts/partials/javascript.html |
Registers the new script globally on every page |
assets/sass/helpers.sass |
Styles for table wrapper, modal, overlay, enlarge/close buttons; minor whitespace cleanup |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+100
to
+104
| modal.appendChild(closeBtn); | ||
| modal.appendChild(cloned); | ||
| // append overlay then modal so overlay is below modal | ||
| document.body.appendChild(overlay); | ||
| document.body.appendChild(modal); |
There was a problem hiding this comment.
The modal created by openTableModal has no ARIA attributes to convey its semantics to screen readers:
- The modal element is missing
role="dialog"andaria-modal="true"to indicate it's a dialog. - Neither
aria-labelnoraria-labelledbyis set on the modal, so assistive technologies have no way to announce its purpose. - When the modal opens, focus is not moved into the modal, so keyboard users will be stuck in the background page.
- When the modal closes, focus is not restored to the triggering button (
btn).
These are all required for WCAG 2.1 compliance. Consider usingmodal.setAttribute("role", "dialog"),modal.setAttribute("aria-modal", "true"),modal.setAttribute("aria-label", "Table enlarged view"), moving focus tocloseBtnon open, and restoring focus tobtnon close.
Member
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
Hugo 0.154 removed site.IsServer (replaced by hugo.IsServer) and
now returns nil for .File on pages without a backing file (list pages,
home page). Wrap all .File.Path accesses in {{ with .File }} guards
and switch to hugo.IsServer so the site builds on both old and new
Hugo versions.
Signed-off-by: Vadim Bauer <1492007+Vad1mo@users.noreply.github.com>
- Add aria-label to enlarge/close buttons, role="dialog" and aria-modal on the modal element - Focus close button on open, restore focus to trigger on close - Lock body scroll while modal is open - Guard against opening multiple modals simultaneously - Fix overlay z-index (10 → 9998) so it covers the navbar - Replace broken sticky+float on close button with sticky+margin-left - Use visible focus outlines instead of near-invisible box-shadow - Remove unnecessary computed style copying (clone inherits CSS) - Extract table popout styles into dedicated sass file Signed-off-by: Vadim Bauer <1492007+Vad1mo@users.noreply.github.com>
hugo.IsServer requires Hugo 0.120+. The Netlify deploy uses Hugo 0.74.0, so use .Site.IsServer which works across all versions. Signed-off-by: Vadim Bauer <1492007+Vad1mo@users.noreply.github.com>
Vad1mo
approved these changes
Mar 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Adds a pop-out option for wide tables so they can be viewed in full size without horizontal scrolling.
This improves readability and usability, especially on smaller screens.
Why is this change needed?
Some documentation tables overflow the content area and require horizontal scrolling,
which makes them hard to read. A pop-out view allows users to focus on the table content
without layout constraints.
Context
I previously commented on the issue and followed up on Slack.
As this is a small UI fix, I proceeded with a PR to move things forward.
How was this tested?
Screencast from 2025-12-28 18-02-01.webm
ifferent viewport sizes
Related Issue
#601
Happy to update this PR based on feedback.