Fix the issue where the top scroll bar is not visible when the chart is enlarged.

Signed-off-by: yuluo-yx <[email protected]>

Author: yuluo-yx

website/src/components/ZoomableMermaid/index.js

@@ -187,7 +187,12 @@ const ZoomableMermaid = ({ children, title, defaultZoom = 1.2 }) => {
         >
           <div
             className={styles.diagramContainer}
-            style={{ transform: `scale(${zoomLevel})`, transformOrigin: 'center' }}
+            style={{ 
+              transform: `scale(${zoomLevel})`, 
+              // Ensure scaling is from the center of the diagram.
+              // Fix the issue where the top scroll bar is not visible when the chart is enlarged.
+              transformOrigin: 'center top'
+            }}
           >
             <Mermaid value={children} />
           </div>

website/src/components/ZoomableMermaid/styles.module.css

@@ -203,7 +203,8 @@
   overflow: auto;
   flex: 1;
   display: flex;
-  align-items: center;
+  /* must be flex-start. */
+  align-items: flex-start;
   justify-content: center;
   min-height: 0;
   background: var(--tech-surface-bg);