fix diagram height and button overlap for large batch numbers

NomicFoundation · Sep 25, 2024 · 0bcbc23 · 0bcbc23
1 parent d26afda
commit 0bcbc23
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/ui/src/components/mermaid.tsx b/packages/ui/src/components/mermaid.tsx
@@ -25,7 +25,7 @@ export const Mermaid: React.FC<{
 
   useEffect(() => {
     mermaid.initialize({
-      maxTextSize: 500000,
+      maxTextSize: 5000000,
       flowchart: {
         padding: 50,
       },

diff --git a/packages/ui/src/main.css b/packages/ui/src/main.css
@@ -47,6 +47,7 @@ body {
 
 .mermaid {
   background: #fbfbfb;
+  height: 500px;
 }
 
 .mermaid * {
@@ -55,7 +56,7 @@ body {
 }
 
 .mermaid svg {
-  height: 300px;
+  height: 100%;
   vertical-align: middle;
 }
 

diff --git a/packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx b/packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx
@@ -90,6 +90,7 @@ const SingleFutureNotice = styled.div`
 const VisualizeDiv = styled.div`
   font-weight: 700;
   padding: 1.5rem;
+  width: 100%;
 `;
 
 const FlowTooltip: React.FC = () => (
@@ -165,6 +166,11 @@ const SectionHeader = styled.div`
 const BatchBtnSection = styled.div`
   margin-bottom: 40px;
   text-align: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  row-gap: 1rem;
+  width: 100%;
 `;
 
 const BatchBtn = styled.span<{ isCurrentlyHovered: boolean }>`
@@ -177,6 +183,7 @@ const BatchBtn = styled.span<{ isCurrentlyHovered: boolean }>`
   background: #ffffff;
   border: 1px solid #edcf00;
   cursor: pointer;
+  white-space: nowrap;
 
   ${(props) =>
     props.isCurrentlyHovered &&