fix(ui): Fix Toolbar Alignment in Model Registry UI (kubeflow#1140)

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

remove gap to fix extra padding

fix chip padding

Author: jenny-s51

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx

@@ -91,6 +91,7 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
             label: key,
           }))}
           value={searchType}
+          toggleProps={{ style: { minWidth: '150px' } }}
           onChange={(newSearchType) => {
             const newSearchTypeInput = asEnumMember(newSearchType, SearchType);
             if (newSearchTypeInput !== null) {

clients/ui/frontend/src/shared/style/MUI-theme.scss

@@ -49,8 +49,6 @@
   --mui-menu-toggle--PaddingInlineEnd: 16px;
   --mui-menu-toggle--ColumnGap: 0;
   --mui-menu-toggle--expanded--Color: black;
-  --mui-menu-toggle--hover--BorderColor: none;
-  --mui-menu-toggle--BorderColor: none;
   --mui-menu-toggle--PaddingInlineStart: 10px;
   --mui-menu-toggle--PaddingInlineEnd: 10px;
 
@@ -125,9 +123,7 @@
 }
 
 .mui-theme .pf-v6-c-alert {
-  --pf-v6-c-alert--m-warning__title--Color: var(
-    --pf-t--global--text--color--status--warning--default
-  );
+  --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
   --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-FontWeight);
   --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
@@ -266,9 +262,6 @@
   --pf-v6-c-form__section--Gap: 0px;
 }
 
-.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
-  padding: 8px 14px;
-}
 
 .mui-theme .tr-fieldset-wrapper .form-fieldset {
   inset: 0px;
@@ -304,7 +297,7 @@
   box-sizing: border-box;
 }
 
-.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
+.mui-theme .pf-v6-c-form-control> :is(input, select, textarea):focus {
   --pf-v6-c-form-control--OutlineOffset: none;
   outline: none;
 }
@@ -334,18 +327,18 @@
 }
 
 .form-fieldset-wrapper:hover .form-fieldset {
-  border-color: black;
+  border-color: var(--mui-palette-common-black);
 }
 
-.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
+.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled~.form-fieldset {
   border-color: rgba(0, 0, 0, 0.23);
 }
 
-.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
+.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error~.form-fieldset {
   border-color: var(--mui-palette-error-main);
 }
 
-.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control .pf-m-error ~ .form-fieldset {
+.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control .pf-m-error~.form-fieldset {
   border-color: var(--mui-palette-error-main);
 }
 
@@ -445,8 +438,8 @@
   --pf-v6-c-form-control--after--BorderColor: transparent !important;
 }
 
-.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
-.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within+.pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown)+.pf-v6-c-form__label {
   color: var(--mui-palette-primary-main);
 }
 
@@ -499,6 +492,7 @@
   --pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd);
   --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
 }
+
 .mui-theme .pf-v6-c-menu__item.pf-m-selected {
   --pf-v6-c-menu__item--BackgroundColor: var(--mui-menu__item--selected--BackgroundColor);
 }
@@ -507,28 +501,20 @@
   display: none;
 }
 
-.mui-theme .pf-v6-c-menu-toggle {
+.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-plain) {
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
   --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
-  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
-    --mui-menu-toggle--expanded--BackgroundColor
-  );
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
   --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
-  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
-    --pf-t--global--background--color--action--plain--hover
-  );
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
-    --pf-t--global--color--brand--default
-  );
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
-    --mui-palette-primary-dark
-  );
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark);
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--mui-palette-common-white);
   --pf-v6-c-menu-toggle--disabled--Color: var(--mui-palette-text-disabled);
   --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-action-disabled);
@@ -539,6 +525,39 @@
   letter-spacing: 0.02857em;
 }
 
+// Apply the menu toggle styling to all except split button variant
+.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--BackgroundColor: var(--mui-palette-common-white);
+
+  &:hover {
+    // Restore direct border color setting for hover
+    border-color: var(--mui-palette-common-black);
+  }
+
+  &:focus-within {
+    // Keep border width consistent to prevent layout shift
+    border: 1px solid 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);
+  }
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
+  --pf-v6-c-menu-toggle--BorderRadius: 50%;
+  // Ensure plain variant doesn't get the border styling
+  border: none;
+
+  &:hover,
+  &:focus-within {
+    border: none;
+    box-shadow: none;
+    background-color: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
+  }
+}
+
 .mui-theme .pf-v6-c-menu-toggle__button {
   text-transform: var(--mui-text-transform);
   font-weight: var(--mui-button-FontWeight);
@@ -564,12 +583,8 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
 }
 
-.mui-theme
-  .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
-  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
-    --mui-palette-primary-dark
-  );
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
 }
 
 .mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
@@ -664,7 +679,7 @@
 }
 
 /* When radio is checked */
-.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::before {
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::before {
   background: var(--mui-palette-common-white);
   border-color: var(--mui-palette-primary-main);
 }
@@ -687,7 +702,7 @@
 }
 
 /* Inner dot for checked state */
-.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
   content: '';
   position: absolute;
   left: 5px;
@@ -717,15 +732,11 @@
   --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
   --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
-  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
-    --mui-table--cell--first-last-child--PaddingInline
-  );
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
   --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-FontWeight);
   --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
   --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
-  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
-    --mui-table__sort-indicator--MarginInlineStart
-  );
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
 
   letter-spacing: 0.01071em;
 }
@@ -789,9 +800,7 @@
   --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
   --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
   --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
-  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
-    --mui-tabs__item--m-current__link--after--BorderWidth
-  );
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
   --pf-v6-c-tabs__link--FontSize: 0.875rem;
 }
 
@@ -813,7 +822,7 @@
   align-content: center;
 }
 
-.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select > .pf-v6-c-menu-toggle.pf-m-disabled {
+.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select>.pf-v6-c-menu-toggle.pf-m-disabled {
   border: none;
 }
 
@@ -854,7 +863,6 @@
 .mui-theme .pf-v6-c-label.pf-m-outline {
   --pf-v6-c-label--BorderColor: none;
   --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
-  padding: 4px;
 }
 
 .mui-theme .pf-v6-c-masthead {
@@ -870,8 +878,6 @@
 
 .mui-theme .pf-v6-c-button.pf-m-plain {
   --pf-v6-c-button--BorderRadius: 50%;
-  --pf-v6-c-button--PaddingInlineStart: none;
-  --pf-v6-c-button--PaddingInlineEnd: none;
 }
 
 .mui-theme .pf-v6-c-page {
@@ -888,6 +894,7 @@
   --pf-v6-c-page__main-section--PaddingRight: 0;
   overflow: visible;
   margin-right: 2px;
+  gap: 0;
 }
 
 .mui-theme .pf-v6-c-page__main-container {
@@ -934,9 +941,9 @@
   }
 }
 
-.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
-.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer,
-.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-breadcrumb {
+.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed)+.pf-v6-c-page__main-container,
+.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed)+.pf-v6-c-page__drawer,
+.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed)+.pf-v6-c-page__main-breadcrumb {
   --pf-v6-c-page__main-container--MarginInlineStart: calc(-2 * var(--mui-spacing-16px));
   --pf-v6-c-page__main-section--PaddingInlineStart: none;
   --pf-v6-c-page__main-section--PaddingInlineEnd: none;
@@ -969,3 +976,20 @@
     padding-left: var(--mui-spacing-12px);
   }
 }
+
+.mui-theme .pf-v6-c-toolbar__item.toolbar-fieldset-wrapper,
+.mui-theme .toolbar-fieldset-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  height: 51px;
+}
+
+.mui-theme .toolbar-fieldset-wrapper:hover .form-fieldset {
+  border-color: var(--mui-palette-common-black);
+}
+
+.mui-theme .toolbar-fieldset-wrapper:focus-within .form-fieldset,
+.mui-theme .tr-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+}