From 0bcbc232bd2ab1c4a94f28f5cbdffe475791b1b5 Mon Sep 17 00:00:00 2001
From: zoeyTM <probablyzoey+github@gmail.com>
Date: Wed, 25 Sep 2024 04:20:11 -0400
Subject: [PATCH] fix diagram height and button overlap for large batch numbers

---
 packages/ui/src/components/mermaid.tsx                     | 2 +-
 packages/ui/src/main.css                                   | 3 ++-
 .../visualization-overview/components/deployment-flow.tsx  | 7 +++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/mermaid.tsx b/packages/ui/src/components/mermaid.tsx
index 50bb81e7a..44341da19 100644
--- 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
index 13b13163b..5d0a72307 100644
--- 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
index 6aabdab07..419ab844c 100644
--- 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 &&