Commit c98b602 h

Pat Ambrosio · 26-08-28 09:53

Give the diagram modal the whole viewport, and no chrome

Changes: 3 files +75 -43

Changes (Side-by-Side)

Raw

commit c98b602a2dbd5eda2cea013e54ddcdc7fd9ca09a
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Fri Aug 28 09:53:05 2026 +0800

    Give the diagram modal the whole viewport, and no chrome
    
    Two things kept a full-screen viewer from being full-screen.
    
    The content box was capped at max-width: min(95vw, 95vh). On any screen
    wider than it is tall, 95vh is the smaller term, so the cap was driven by
    height: a 1440x900 viewport held the diagram to 855px and threw away
    513px of usable width. The box now fills the viewport.
    
    Underneath that, mermaid writes style="max-width: {natural}px" directly
    on the <svg> it renders. An inline style beats a stylesheet rule however
    specific the selector, so even with the cap gone a diagram would have sat
    at its natural size inside a full-screen box. Hence the !important, which
    is not habit here: measured in a DOM, the computed max-width is 300px
    without it and 100% with it. The viewBox handles the rest, so height can
    stay auto and the aspect ratio follows.
    
    The chrome goes with it: no header bar, no border, no radius. The close
    button floats over the top-right corner and nothing frames the diagram
    but the edge of the screen.
    
    One more test asserted the implementation verbatim -- the SVG sizing rule
    in its pre-!important form, which is exactly the form mermaid overrides.
    That is the third such assertion in this feature, after clone.className
    and the 95vh cap. All three passed against broken behaviour because they
    compared the code to itself. Each now states the working form and fails
    against the broken one; reverting the !important fails two tests.

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index fc7fdf6..040778b 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -172,22 +172,16 @@ diagram_script() {
 	            var content = document.createElement('div');
 	            content.className = 'diagram-modal-content';
 
-	            var header = document.createElement('div');
-	            header.className = 'diagram-modal-header';
-	            header.setAttribute('aria-hidden', 'true');
-
 	            var closeBtn = document.createElement('button');
 	            closeBtn.className = 'diagram-modal-close';
 	            closeBtn.setAttribute('aria-label', 'Close diagram');
 	            closeBtn.innerHTML = '&#x2715;&#xFE0E;';
 	            closeBtn.addEventListener('click', closeModal);
 
-	            header.appendChild(closeBtn);
-
 	            var body = document.createElement('div');
 	            body.className = 'diagram-modal-body';
 
-	            content.appendChild(header);
+	            content.appendChild(closeBtn);
 	            content.appendChild(body);
 	            m.appendChild(backdrop);
 	            m.appendChild(content);
@@ -920,25 +914,37 @@ cat << _EOF_
             transform: none;
           }
         }
-        /* Diagram modal: full-screen display for dense flowcharts */
+        /* Diagram modal: full-screen display for dense flowcharts. The point is
+           to give a dense chart the whole screen, so the content box fills the
+           viewport rather than shrink-wrapping the diagram. An earlier version
+           capped it at min(95vw, 95vh); on any landscape screen 95vh is the
+           smaller of the two, so a 1440x900 viewport held the diagram to 855px
+           and threw away 513px of usable width. */
         .diagram-modal { display: none; position: fixed; inset: 0; z-index: 2000;
                          background-color: var(--modal-backdrop); overflow: auto; }
-        .diagram-modal[open] { display: flex; align-items: center; justify-content: center; }
+        .diagram-modal[open] { display: flex; }
         .diagram-modal-backdrop { position: absolute; inset: 0; z-index: -1; }
         .diagram-modal-content { position: relative; z-index: 1; background-color: var(--bg-primary);
-                                 border: 1px solid var(--border-light); border-radius: 3px;
-                                 max-width: min(95vw, 95vh); max-height: 95vh;
-                                 overflow: auto; display: flex; flex-direction: column; }
-        .diagram-modal-header { display: flex; align-items: center; justify-content: space-between;
-                                padding: 0.75em 1em; border-bottom: 1px solid var(--border-light);
-                                flex-shrink: 0; }
-        .diagram-modal-close { background: none; border: none; font-size: 1.5em;
+                                 width: 100%; height: 100%; overflow: auto; display: flex; }
+        /* No header bar: the close button floats over the diagram so nothing
+           frames it but the viewport edge. */
+        .diagram-modal-close { position: absolute; top: 0.5em; right: 0.5em; z-index: 2;
+                               background: var(--bg-primary); border: 1px solid var(--border-light);
+                               border-radius: 3px; width: 2em; height: 2em; font-size: 1.25em;
                                color: var(--text-primary); cursor: pointer; padding: 0;
-                               line-height: 1; }
+                               line-height: 1; display: flex; align-items: center;
+                               justify-content: center; }
         .diagram-modal-close:hover { opacity: 0.7; }
         .diagram-modal-body { flex: 1; overflow: auto; display: flex; align-items: center;
-                              justify-content: center; padding: 1em; }
-        .diagram-modal-svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }
+                              justify-content: center; padding: 1.5em; min-width: 0; }
+        /* mermaid writes an inline style="max-width: {natural}px" on the <svg>
+           it renders, which an ordinary stylesheet rule cannot beat -- inline
+           styles win over a selector however specific. Without !important the
+           diagram stays at its natural width in a full-screen modal, which is
+           the whole thing the modal is for. The viewBox makes it scale
+           cleanly, so height follows the aspect ratio on its own. */
+        .diagram-modal-svg { max-width: 100% !important; max-height: 100%;
+                             width: 100%; height: auto; }
 
       </style>
       <script>
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 7885517..ba0be6a 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -88,22 +88,16 @@ diagram_script() {
 	            var content = document.createElement('div');
 	            content.className = 'diagram-modal-content';
 
-	            var header = document.createElement('div');
-	            header.className = 'diagram-modal-header';
-	            header.setAttribute('aria-hidden', 'true');
-
 	            var closeBtn = document.createElement('button');
 	            closeBtn.className = 'diagram-modal-close';
 	            closeBtn.setAttribute('aria-label', 'Close diagram');
 	            closeBtn.innerHTML = '&#x2715;&#xFE0E;';
 	            closeBtn.addEventListener('click', closeModal);
 
-	            header.appendChild(closeBtn);
-
 	            var body = document.createElement('div');
 	            body.className = 'diagram-modal-body';
 
-	            content.appendChild(header);
+	            content.appendChild(closeBtn);
 	            content.appendChild(body);
 	            m.appendChild(backdrop);
 	            m.appendChild(content);
@@ -741,25 +735,37 @@ cat << _EOF_
             transform: none;
           }
         }
-        /* Diagram modal: full-screen display for dense flowcharts */
+        /* Diagram modal: full-screen display for dense flowcharts. The point is
+           to give a dense chart the whole screen, so the content box fills the
+           viewport rather than shrink-wrapping the diagram. An earlier version
+           capped it at min(95vw, 95vh); on any landscape screen 95vh is the
+           smaller of the two, so a 1440x900 viewport held the diagram to 855px
+           and threw away 513px of usable width. */
         .diagram-modal { display: none; position: fixed; inset: 0; z-index: 2000;
                          background-color: var(--modal-backdrop); overflow: auto; }
-        .diagram-modal[open] { display: flex; align-items: center; justify-content: center; }
+        .diagram-modal[open] { display: flex; }
         .diagram-modal-backdrop { position: absolute; inset: 0; z-index: -1; }
         .diagram-modal-content { position: relative; z-index: 1; background-color: var(--bg-primary);
-                                 border: 1px solid var(--border-light); border-radius: 3px;
-                                 max-width: min(95vw, 95vh); max-height: 95vh;
-                                 overflow: auto; display: flex; flex-direction: column; }
-        .diagram-modal-header { display: flex; align-items: center; justify-content: space-between;
-                                padding: 0.75em 1em; border-bottom: 1px solid var(--border-light);
-                                flex-shrink: 0; }
-        .diagram-modal-close { background: none; border: none; font-size: 1.5em;
+                                 width: 100%; height: 100%; overflow: auto; display: flex; }
+        /* No header bar: the close button floats over the diagram so nothing
+           frames it but the viewport edge. */
+        .diagram-modal-close { position: absolute; top: 0.5em; right: 0.5em; z-index: 2;
+                               background: var(--bg-primary); border: 1px solid var(--border-light);
+                               border-radius: 3px; width: 2em; height: 2em; font-size: 1.25em;
                                color: var(--text-primary); cursor: pointer; padding: 0;
-                               line-height: 1; }
+                               line-height: 1; display: flex; align-items: center;
+                               justify-content: center; }
         .diagram-modal-close:hover { opacity: 0.7; }
         .diagram-modal-body { flex: 1; overflow: auto; display: flex; align-items: center;
-                              justify-content: center; padding: 1em; }
-        .diagram-modal-svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }
+                              justify-content: center; padding: 1.5em; min-width: 0; }
+        /* mermaid writes an inline style="max-width: {natural}px" on the <svg>
+           it renders, which an ordinary stylesheet rule cannot beat -- inline
+           styles win over a selector however specific. Without !important the
+           diagram stays at its natural width in a full-screen modal, which is
+           the whole thing the modal is for. The viewBox makes it scale
+           cleanly, so height follows the aspect ratio on its own. */
+        .diagram-modal-svg { max-width: 100% !important; max-height: 100%;
+                             width: 100%; height: auto; }
       </style>
       <script>
         (function() {
diff --git a/test/regressions.sh b/test/regressions.sh
index e968be3..714fc4f 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -2625,8 +2625,10 @@ assert_file_contains "$dm_post" "clone.setAttribute('class', 'diagram-modal-svg'
 assert_file_not_contains "$dm_post" "clone.className ="
 
 it "modal SVG is constrained by max-width and max-height"
-# CSS rule ensures the diagram doesn't exceed the modal container.
-assert_file_contains "$dm_post" ".diagram-modal-svg { max-width: 100%; max-height: 100%"
+# The diagram must not exceed the modal, and must be free to grow to fill it.
+# This asserted the rule without !important, which is the form mermaid's inline
+# style overrides -- another assertion that matched the broken code exactly.
+assert_file_contains "$dm_post" ".diagram-modal-svg { max-width: 100% !important; max-height: 100%"
 
 it "focus is given to modal when opened"
 # The modal must take focus for keyboard accessibility.
@@ -2659,9 +2661,27 @@ it "keyboard events are prevented to avoid page scroll"
 # preventDefault must stop Space from scrolling the page.
 assert_file_contains "$dm_post" "e.preventDefault()"
 
-it "modal content is centered in the viewport"
-# The modal must use flexbox to center its content.
-assert_file_contains "$dm_post" ".diagram-modal[open] { display: flex; align-items: center; justify-content: center"
+it "the diagram is centred inside the modal"
+# Centring moved to the body: the content box now fills the viewport, so it is
+# the diagram inside it that gets centred, not the box within the screen.
+assert_file_contains "$dm_post" ".diagram-modal-body { flex: 1; overflow: auto; display: flex; align-items: center;"
+
+it "the modal content box fills the viewport"
+# It used to be capped at min(95vw, 95vh). On any landscape screen 95vh is the
+# smaller term, so a 1440x900 viewport held the diagram to 855px and wasted
+# 513px of width -- the opposite of what a full-screen view is for.
+assert_file_contains "$dm_post" "width: 100%; height: 100%; overflow: auto; display: flex; }"
+assert_file_not_contains "$dm_post" "max-width: min(95vw, 95vh)"
+
+it "the diagram overrides mermaid's inline max-width"
+# mermaid writes style="max-width: {natural}px" directly on the <svg>. An
+# inline style beats any selector, so without !important the diagram keeps its
+# natural width and never grows to fill the modal.
+assert_file_contains "$dm_post" "max-width: 100% !important"
+
+it "the modal has no chrome around the diagram"
+# Just a close button floating over the diagram; no header bar, no frame.
+assert_file_not_contains "$dm_post" "diagram-modal-header"
 
 it "modal is removed from the normal flow"
 # position:fixed takes the modal out of the document flow.