From 4ba1a9c0f01bcf15319c21d96a2919c4d2c2e72d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 22 May 2026 15:44:00 +0300
Subject: [PATCH 1/2] fix(web): wrap disabled IconButtons in span for MUI
 Tooltip compatibility

MUI Tooltip cannot listen to events on a disabled button element.
Wrap all disabled IconButtons in a <span> so Tooltip can attach its
event listeners to the span instead.

Affects: inline zoom-out, zoom-in, reset-zoom; modal zoom-in, zoom-out.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/spa/components/MermaidDiagram.tsx | 100 ++++++++++++----------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/web/src/spa/components/MermaidDiagram.tsx b/web/src/spa/components/MermaidDiagram.tsx
index a67fdcc..0d51bdb 100644
--- a/web/src/spa/components/MermaidDiagram.tsx
+++ b/web/src/spa/components/MermaidDiagram.tsx
@@ -222,27 +222,31 @@ export function MermaidDiagram({ chart, mode = 'dark' }: MermaidDiagramProps) {
           }}
         >
           <Tooltip title="Zoom out" placement="bottom">
-            <IconButton
-              size="small"
-              aria-label="Zoom out"
-              onClick={handleInlineZoomOut}
-              sx={{ color: pillColor, p: 0.5 }}
-              disabled={scale <= INLINE_MIN_SCALE}
-            >
-              <ZoomOutIcon fontSize="small" />
-            </IconButton>
+            <span>
+              <IconButton
+                size="small"
+                aria-label="Zoom out"
+                onClick={handleInlineZoomOut}
+                sx={{ color: pillColor, p: 0.5 }}
+                disabled={scale <= INLINE_MIN_SCALE}
+              >
+                <ZoomOutIcon fontSize="small" />
+              </IconButton>
+            </span>
           </Tooltip>
 
           <Tooltip title="Zoom in" placement="bottom">
-            <IconButton
-              size="small"
-              aria-label="Zoom in"
-              onClick={handleInlineZoomIn}
-              sx={{ color: pillColor, p: 0.5 }}
-              disabled={scale >= INLINE_MAX_SCALE}
-            >
-              <ZoomInIcon fontSize="small" />
-            </IconButton>
+            <span>
+              <IconButton
+                size="small"
+                aria-label="Zoom in"
+                onClick={handleInlineZoomIn}
+                sx={{ color: pillColor, p: 0.5 }}
+                disabled={scale >= INLINE_MAX_SCALE}
+              >
+                <ZoomInIcon fontSize="small" />
+              </IconButton>
+            </span>
           </Tooltip>
 
           <Tooltip title="Fullscreen" placement="bottom">
@@ -257,15 +261,17 @@ export function MermaidDiagram({ chart, mode = 'dark' }: MermaidDiagramProps) {
           </Tooltip>
 
           <Tooltip title="Reset zoom" placement="bottom">
-            <IconButton
-              size="small"
-              aria-label="Reset zoom"
-              onClick={(e) => { e.stopPropagation(); setScale(1); }}
-              sx={{ color: pillColor, p: 0.5 }}
-              disabled={scale === 1}
-            >
-              <FitScreenIcon fontSize="small" />
-            </IconButton>
+            <span>
+              <IconButton
+                size="small"
+                aria-label="Reset zoom"
+                onClick={(e) => { e.stopPropagation(); setScale(1); }}
+                sx={{ color: pillColor, p: 0.5 }}
+                disabled={scale === 1}
+              >
+                <FitScreenIcon fontSize="small" />
+              </IconButton>
+            </span>
           </Tooltip>
         </Box>
       </Box>
@@ -380,15 +386,17 @@ export function MermaidDiagram({ chart, mode = 'dark' }: MermaidDiagramProps) {
             </IconButton>
           </Tooltip>
           <Tooltip title="Zoom in">
-            <IconButton
-              aria-label="Zoom in"
-              size="small"
-              onClick={handleModalZoomIn}
-              sx={{ color: pillColor, p: 0.5 }}
-              disabled={modalScale >= MAX_SCALE}
-            >
-              <ZoomInIcon fontSize="small" />
-            </IconButton>
+            <span>
+              <IconButton
+                aria-label="Zoom in"
+                size="small"
+                onClick={handleModalZoomIn}
+                sx={{ color: pillColor, p: 0.5 }}
+                disabled={modalScale >= MAX_SCALE}
+              >
+                <ZoomInIcon fontSize="small" />
+              </IconButton>
+            </span>
           </Tooltip>
 
           {/* Row 2: [left] [reset] [right] */}
@@ -416,15 +424,17 @@ export function MermaidDiagram({ chart, mode = 'dark' }: MermaidDiagramProps) {
             </IconButton>
           </Tooltip>
           <Tooltip title="Zoom out">
-            <IconButton
-              aria-label="Zoom out"
-              size="small"
-              onClick={handleModalZoomOut}
-              sx={{ color: pillColor, p: 0.5 }}
-              disabled={modalScale <= MIN_SCALE}
-            >
-              <ZoomOutIcon fontSize="small" />
-            </IconButton>
+            <span>
+              <IconButton
+                aria-label="Zoom out"
+                size="small"
+                onClick={handleModalZoomOut}
+                sx={{ color: pillColor, p: 0.5 }}
+                disabled={modalScale <= MIN_SCALE}
+              >
+                <ZoomOutIcon fontSize="small" />
+              </IconButton>
+            </span>
           </Tooltip>
         </Box>
       </Dialog>

From 8706790fba4c3db540bfab4d8045d5fcd12d45e2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 22 May 2026 15:47:19 +0300
Subject: [PATCH 2/2] fix(web): fit diagram to container width at default scale

---
 web/src/spa/components/MermaidDiagram.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/spa/components/MermaidDiagram.tsx b/web/src/spa/components/MermaidDiagram.tsx
index 0d51bdb..12e94b8 100644
--- a/web/src/spa/components/MermaidDiagram.tsx
+++ b/web/src/spa/components/MermaidDiagram.tsx
@@ -187,11 +187,15 @@ export function MermaidDiagram({ chart, mode = 'dark' }: MermaidDiagramProps) {
           borderColor: 'divider',
           overflow: 'auto',
           cursor: 'zoom-in',
-          // Use width (layout-affecting) instead of zoom/transform:scale so
-          // the card expands correctly in all browsers including Firefox.
+          // scale=1 → fit container (100%). scale≠1 → explicit pixel width
+          // so the card scrolls when zoomed in. Always layout-affecting (no
+          // zoom/transform:scale) so it works in Firefox too.
           '& .mermaid-svg-wrap svg': {
             display: 'block',
-            width: naturalWidth ? `${naturalWidth * scale}px` : '100%',
+            width: scale === 1
+              ? '100%'
+              : naturalWidth ? `${naturalWidth * scale}px` : `${scale * 100}%`,
+            maxWidth: scale === 1 ? '100%' : 'none',
             height: 'auto',
           },
         }}