mod-arch-kubeflow 1.1.4 → 1.2.0

package/dist/style/MUI-theme.scss

@@ -18,8 +18,8 @@
 
   // Button
   --mui-button-FontWeight: 500;
-  --mui-button--BorderWidth: 1px;
-  --mui-button--hover--BorderWidth: 1px;
+  --mui-button--BorderWidth: var(--pf-t--global--border--width--regular);
+  --mui-button--hover--BorderWidth: var(--pf-t--global--border--width--regular);
   --mui-button--PaddingBlockStart: 6px;
   --mui-button--PaddingBlockEnd: 6px;
   --mui-button--PaddingInlineStart: 16px;
@@ -29,6 +29,12 @@
 
   // Drawer
   --mui-drawer-BorderLeft: var(--mui-palette-grey-300);
+  --mui-drawer__panel--MaxWidth: 600px;
+  --mui-drawer__panel--MinWidth: 400px;
+
+  // Form focus states (thicker border for emphasis, adjusted padding to prevent layout shift)
+  --mui-form--focus--BorderWidth: 2px;
+  --mui-form--focus--Padding: 7px;
 
   // Helper text
   --mui-helper-text__item--FontWeight: 400;
@@ -59,6 +65,12 @@
   --mui-menu-toggle--PaddingInlineStart: 10px;
   --mui-menu-toggle--PaddingInlineEnd: 10px;
 
+  // Nav
+  --mui-nav--current--BackgroundColor: #ffffff1b;
+
+  // Toggle group
+  --mui-toggle-group--selected--BackgroundColor: #e0f0ff;
+
   // Radio
   --mui-radio--margin: 10px 0;
   --mui-radio-PaddingLeft: 30px;
@@ -73,6 +85,10 @@
   --kf-central-app-drawer-width: 240px;
   --kf-central-app-bar-height: 64px;
 
+
+  // Pagination
+  --mui-pagination--zIndex: 100;
+
   // Table
   --mui-table__button--BackgroundColor: transparent;
   --mui-table__button--hover--BackgroundColor: transparent;
@@ -113,7 +129,7 @@
   --mui-spacing-32px: calc(4 * var(--mui-spacing));
 
   --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
-  --pf-t--global--border--width--box--status--default: 1px;
+  --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--regular);
   --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
   --pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
 
@@ -197,13 +213,15 @@
 
 
 .mui-theme .pf-v6-c-card {
-  --pf-v6-c-card--BorderWidth: 1px;
+  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
   --pf-v6-c-card--BorderColor: var(--mui-palette-divider);
+  border: var(--pf-v6-c-card--BorderWidth) solid var(--pf-v6-c-card--BorderColor);
 }
 
 .mui-theme .pf-v6-c-card.pf-m-compact.pf-m-selectable {
-  border: 1px solid var(--mui-palette-divider);
+  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-card--BorderColor: var(--mui-palette-divider);
 }
 
 .mui-theme .pf-v6-c-card__selectable-actions
@@ -234,7 +252,7 @@
   align-content: center;
 }
 
-.mui-theme .pf-v6-c-drawer {
+.mui-theme .pf-v6-c-drawer { 
   --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
     --mui-drawer-BorderLeft
   );
@@ -250,6 +268,24 @@
   margin-right: var(--mui-spacing-16px);
 }
 
+// Ensure drawer panel has proper max-width to prevent it from being too wide
+.mui-theme .pf-v6-c-drawer__panel {
+  max-width: var(--mui-drawer__panel--MaxWidth);
+  min-width: var(--mui-drawer__panel--MinWidth);
+}
+
+// On smaller screens, make drawer take full width or switch to overlay
+@media (max-width: 1200px) {
+  .mui-theme .pf-v6-c-drawer.pf-m-inline {
+    // Switch to panel-left positioning on smaller screens for better UX
+    --pf-v6-c-drawer--m-inline--m-expanded__panel--FlexBasis: 100%;
+  }
+  
+  .mui-theme .pf-v6-c-drawer__panel {
+    max-width: 100%;
+  }
+}
+
 .mui-theme .pf-v6-c-form {
   --pf-v6-c-form--GridGap: 0;
 }
@@ -329,10 +365,18 @@
   }
 }
 
-// Remove borders on form controls, except within file upload details and modal boxes
-.mui-theme .pf-v6-c-form-control:not(.pf-v6-c-file-upload__file-details .pf-v6-c-form-control):not(.pf-v6-c-modal-box__body .pf-v6-c-form-control)::after,
-.mui-theme .pf-v6-c-form-control:not(.pf-v6-c-file-upload__file-details .pf-v6-c-form-control):not(.pf-v6-c-modal-box__body .pf-v6-c-form-control)::before {
-  border: none;
+// Use PatternFly's border system via CSS custom properties instead of pseudo-elements
+// This provides proper borders without relying on ::before/::after which can conflict
+// Exclude spans from getting borders (they're used for labels/legends)
+.mui-theme .pf-v6-c-form-control:not(span) {
+  border: var(--pf-v6-c-form-control--BorderWidth, 1px) solid var(--pf-v6-c-form-control--BorderColor, var(--pf-t--global--border--color--default));
+  border-radius: var(--pf-v6-c-form-control--BorderRadius, var(--mui-shape-borderRadius));
+}
+
+// Remove pseudo-element borders everywhere since we're using real borders now
+.mui-theme .pf-v6-c-form-control::after,
+.mui-theme .pf-v6-c-form-control::before {
+  display: none;
 }
 
 .mui-theme .pf-v6-c-form-control input::placeholder {
@@ -372,7 +416,7 @@
 }
 
 .mui-theme .tr-fieldset-wrapper .form-fieldset {
-  inset: 0px;
+  inset: 0px; // Layout property - no PF variable exists
 }
 
 .mui-theme .pf-v6-c-text-input-group::before {
@@ -463,8 +507,8 @@
 
 .form-fieldset-wrapper:focus-within .form-fieldset {
   border-color: var(--mui-palette-primary-main);
-  border-width: 2px;
-  padding: 7px 7px;
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
 
 .form-fieldset-legend {
@@ -497,8 +541,8 @@
 .toolbar-fieldset-wrapper:focus-within .form-fieldset,
 .tr-fieldset-wrapper:focus-within .form-fieldset {
   border-color: var(--mui-palette-primary-main);
-  border-width: 2px;
-  padding: 7px 7px;
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
 
 .toolbar-fieldset-wrapper .form-fieldset,
@@ -511,7 +555,7 @@
   pointer-events: none;
   border-radius: inherit;
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--pf-t--global--border--width--regular);
   overflow: hidden;
   min-width: 0%;
   border-color: rgba(0, 0, 0, 0.23);
@@ -545,8 +589,39 @@
 .tr-fieldset-wrapper .pf-v6-c-form-control,
 .toolbar-fieldset-wrapper .pf-v6-c-form-control,
 .form-fieldset-wrapper .pf-v6-c-form-control {
-  --pf-v6-c-form-control--before--BorderColor: transparent;
-  --pf-v6-c-form-control--after--BorderColor: transparent;
+  // Hide real borders since fieldset wrappers provide their own border styling
+  border: none;
+}
+
+// Ensure legend spans don't get form control styling
+.form-fieldset-legend span {
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+
+// Ensure form-fieldset-wrapper styling works within expandable sections
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:hover .form-fieldset {
+  border-color: var(--mui-palette-common-black);
+}
+
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
+}
+
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within {
+  color: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
+  border-color: var(--mui-palette-error-main);
+}
+
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
+  border-color: rgba(0, 0, 0, 0.23);
 }
 
 .mui-theme .pf-v6-c-form__field-group-body {
@@ -558,13 +633,17 @@
   color: var(--mui-palette-primary-main);
 }
 
-.mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
-  --pf-v6-c-form-control--after--BorderWidth: 2px;
-  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
+.mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form-control:not(span) {
+  border-width: var(--mui-form--focus--BorderWidth);
+  border-color: var(--mui-palette-primary-main);
 }
 
-.mui-theme .pf-v6-c-form-control.pf-m-error {
-  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-error-main);
+.mui-theme .pf-v6-c-form-control.pf-m-error:not(span) {
+  border-color: var(--mui-palette-error-main);
+}
+
+.mui-theme .pf-v6-c-form-control:hover:not(span) {
+  border-color: var(--pf-t--global--border--color--hover, var(--mui-palette-grey-400));
 }
 
 .mui-theme .pf-v6-c-form-control__utilities {
@@ -653,17 +732,19 @@
 .mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) {
   position: relative;
   box-sizing: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.23);
+  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-menu-toggle--BorderStyle: solid;
+  --pf-v6-c-menu-toggle--BorderColor: rgba(0, 0, 0, 0.23);
   --pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
 
   &:hover {
-    // Restore direct border color setting for hover
-    border-color: var(--mui-palette-common-black);
+    --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-palette-common-black);
   }
 
   &:focus-within {
     // Keep border width consistent to prevent layout shift
-    border: 1px solid var(--mui-palette-primary-main);
+    --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
+    --pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
     // Use box-shadow to create a thicker border while preventing layout shift
     box-shadow: 0 0 0 1px var(--mui-palette-primary-main);
   }
@@ -724,6 +805,31 @@
   vertical-align: revert;
 }
 
+// Specific styling for workspace details actions menu - minimal overrides only
+.mui-theme .workspace-details-action-toggle.pf-m-primary {
+  // Override the white background that gets applied to all menu toggles
+  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
+  // Use the proper PatternFly menu toggle variable for primary background color
+  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
+}
+
+// Prevent text wrapping in Connect split button
+.mui-theme .connect-button-no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: fit-content;
+}
+
+// Ensure the split button menu toggle maintains proper width
+.mui-theme .pf-v6-c-menu-toggle.pf-m-split-button {
+  min-width: fit-content;
+  
+  .pf-v6-c-menu-toggle__button {
+    white-space: nowrap;
+  }
+}
+
 .mui-theme .pf-v6-c-menu-toggle__toggle-icon {
   font-size: 20px;
 }
@@ -743,7 +849,7 @@
 
 .mui-theme .pf-v6-c-nav__link.pf-m-current {
   border-left: 3px solid var(--mui-palette-common-white);
-  background-color: #ffffff1b;
+  background-color: var(--mui-nav--current--BackgroundColor);
   color: var(--mui-palette-common-white);
 }
 
@@ -812,14 +918,14 @@
 
 .mui-theme .pf-v6-c-nav__link {
   --pf-v6-c-nav__link--BorderRadius: 0px;
-  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
+  --pf-v6-c-nav__link--hover--BackgroundColor: var(--mui-nav--current--BackgroundColor);
   --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
   --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
   --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
 
   &.pf-m-current {
     border-left: 3px solid var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--m-current--BackgroundColor: #ffffff1b;
+    --pf-v6-c-nav__link--m-current--BackgroundColor: var(--mui-nav--current--BackgroundColor);
     --pf-v6-c-nav__link--m-current--Color: var(--mui-palette-common-white);
   }
 
@@ -1026,7 +1132,9 @@ left: 0;
 }
 
 .mui-theme .pf-v6-c-label.pf-m-overflow {
-  border: 1px solid var(--mui-palette-grey-400);
+  --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-label--BorderStyle: solid;
+  --pf-v6-c-label--BorderColor: var(--mui-palette-grey-400);
 
   .pf-v6-c-label__text {
     color: var(--mui-palette-common-black);
@@ -1075,6 +1183,9 @@ left: 0;
   min-height: 100vh;
   overflow-x: hidden;
   --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
+  
+  // Prevent double scrollbars by disabling overflow on the outer page container
+  overflow-y: hidden;
 }
 
 // Error page container
@@ -1084,7 +1195,7 @@ left: 0;
 
 .mui-theme .pf-v6-c-page__main {
   --pf-v6-c-page__main--PaddingRight: 0;
-  overflow: visible;
+  overflow-y: auto; // Allow main content to scroll instead of outer container
   margin-right: 2px;
   height: calc(100vh - var(--kf-central-app-bar-height));
   min-height: calc(100vh - var(--kf-central-app-bar-height));
@@ -1131,12 +1242,18 @@ left: 0;
 
 .mui-theme .pf-v6-c-pagination {
   --pf-v6-c-pagination__total-items--Display: block;
+  position: relative;
+  z-index: var(--mui-pagination--zIndex);
 }
 
 .mui-theme .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
   display: flex;
 }
 
+.mui-theme .workspace-connect-wrapper .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-split-button {
+  z-index: 0;
+}
+
 .mui-theme .pf-v6-c-pagination__total-items b {
   font-weight: normal;
 }
@@ -1228,20 +1345,22 @@ left: 0;
 
 .mui-theme .pf-v6-c-form__group-control .pf-v6-c-menu-toggle.pf-m-full-width.pf-m-typeahead {
   position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  border-radius: var(--mui-shape-borderRadius);
-  background-color: var(--mui-palette-common-white);
+  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-menu-toggle--BorderStyle: solid;
+  --pf-v6-c-menu-toggle--BorderColor: rgba(0, 0, 0, 0.23);
+  --pf-v6-c-menu-toggle--BorderRadius: var(--mui-shape-borderRadius);
+  --pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
   height: 54px;
 
   &:hover {
-    border-color: var(--mui-palette-common-black);
-    background-color: var(--mui-palette-common-white);
+    --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-palette-common-black);
+    --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-common-white);
   }
 
   &:focus-within {
-    border-color: var(--mui-palette-primary-main);
-    border-width: 2px;
-    background-color: var(--mui-palette-common-white);
+    --pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
+    border-width: var(--mui-form--focus--BorderWidth); // Thicker border for focus state (intentional for emphasis)
+    --pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
   }
 }
 
@@ -1328,7 +1447,7 @@ left: 0;
 
 /* Workaround for Toggle group header in Workspace Kind Form */
 .mui-theme .workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {
-  background-color: #e0f0ff;
+  background-color: var(--mui-toggle-group--selected--BackgroundColor);
   color: var(--pf-t--color--black);
 }
 
@@ -1340,4 +1459,27 @@ left: 0;
     box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
     outline: none; // Remove default browser outline
   }
+}
+
+// Grid view: Position action cell (Actions kebab) on the right
+// The Connect button is a regular cell and will appear with other row content on the left
+.mui-theme .pf-v6-c-table.pf-m-grid .pf-v6-c-table__tbody .pf-v6-c-table__tr {
+  .pf-v6-c-table__td.pf-m-action {
+    // Actions kebab menu stays on the right side in grid view
+    // PatternFly automatically positions action cells appropriately
+    justify-self: end;
+  }
+  
+  // Connect button cell styling in grid view
+  .pf-v6-c-table__td:has(.workspace-connect-wrapper) {
+    // Remove the label for Connect cell since it's empty anyway
+    &::before {
+      content: none;
+    }
+  }
+  
+  // Add top padding to Connect button only in grid view
+  .workspace-connect-wrapper {
+    padding-top: var(--pf-t--global--spacer--lg);
+  }
 }