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

KaotoIO · Sep 12, 2024 · ab413a2 · ab413a2
1 parent fe5d257
commit ab413a2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts
@@ -13,7 +13,7 @@ Cypress.Commands.add('toggleExpandGroup', (groupName: string, groupIndex?: numbe
 });
 
 Cypress.Commands.add('closeStepConfigurationTab', () => {
-  cy.get('[data-testid="close-side-bar"]').click();
+  cy.get('[data-testid="close-side-bar"]').click({ force: true });
   cy.get('.pf-topology-resizable-side-bar').should('not.exist');
 });
 

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>