fix(1422) Config panel buttons overlay - add toggleGroup wrapping

KaotoIO · Sep 11, 2024 · c481700 · c481700
1 parent 318ed09
commit c481700
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -211,6 +211,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
   return (
     <TopologyView
       defaultSideBarSize={sidebarWidth + 'px'}
+      minSideBarSize={'210px'}
       onSideBarResize={(width) => {
         setSidebarWidth(width);
       }}

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.scss b/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.scss
@@ -16,17 +16,22 @@
 
 .form-tabs {
   display: flex;
+  flex-wrap: wrap;
   margin-bottom: 15px;
 
   /* stylelint-disable-next-line selector-class-pattern */
   .pf-v5-c-toggle-group__item {
     display: flex;
-    width: 20%;
+    flex: content;
+    min-width: 33%;
   }
 
   button {
     flex: 1;
     justify-content: center;
     font-weight: bold;
+
+    --pf-v5-c-toggle-group__button--PaddingRight: 0.25rem;
+    --pf-v5-c-toggle-group__button--PaddingLeft: 0.25rem;
   }
 }
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -275,7 +275,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
             class="pf-v5-c-drawer__panel pf-m-resizable"
             hidden=""
             id="topology-resize-panel"
-            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
           />
         </div>
       </div>
@@ -625,7 +625,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
             class="pf-v5-c-drawer__panel pf-m-resizable"
             hidden=""
             id="topology-resize-panel"
-            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
           />
         </div>
       </div>
@@ -1376,7 +1376,7 @@ exports[`Canvas should render correctly 1`] = `
             class="pf-v5-c-drawer__panel pf-m-resizable"
             hidden=""
             id="topology-resize-panel"
-            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
           />
         </div>
       </div>
@@ -2127,7 +2127,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
             class="pf-v5-c-drawer__panel pf-m-resizable"
             hidden=""
             id="topology-resize-panel"
-            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
           />
         </div>
       </div>
@@ -2982,7 +2982,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
             class="pf-v5-c-drawer__panel pf-m-resizable"
             hidden=""
             id="topology-resize-panel"
-            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
           />
         </div>
       </div>