fixes for text area

kubeflow · Oct 7, 2024 · 64b3e38 · 64b3e38
1 parent 43b0035
commit 64b3e38
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/...tend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/...tend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -187,7 +187,7 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
             </HelperText>
           </FormHelperText>
         )}
-        <FormGroup label="Version description" fieldId="version-description">
+        <FormGroup className="version-description" label="Version description" fieldId="version-description">
           <div className="form-fieldset-wrapper">
             {versionDescriptionInput}
             <fieldset aria-hidden="true" className="form-fieldset">

diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss
@@ -88,7 +88,7 @@
   --mui-text-transform: uppercase;
 
   --mui-spacing-4px: calc(0.5 * var(--mui-spacing));
-  --mui-spacing-8px: calc(0.5 * var(--mui-spacing));
+  --mui-spacing-8px: var(--mui-spacing);
   --mui-spacing-16px: calc(2 * var(--mui-spacing));
 
   --pf-t--global--border--width--box--status--default: 1px;
@@ -142,6 +142,10 @@
   position: relative;
 }
 
+.pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
+  padding-top: 10px;
+}
+
 .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
   color: var(--mui-palette-text-disabled);
 }
@@ -179,6 +183,18 @@
   --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
 }
 
+.pf-v6-c-form-control.pf-m-resize-both {
+  // Resize is disabled in MUI.
+  resize: none;
+  padding-top: var(--mui-spacing-16px);
+  padding-bottom: var(--mui-spacing-16px);
+}
+
+.pf-v6-c-form-control > :is(input, select, textarea) {
+  padding-block-start: 0px; 
+  padding-block-end: 0px;
+}
+
 .pf-v6-c-form__section {
   gap: 0px;
 }
@@ -202,7 +218,7 @@
 
 .pf-v6-c-text-input-group__icon {
   color: rgba(0, 0, 0, 0.38);
-  margin-right: var(--mui-spacing-8px);
+  margin-right: var(--mui-spacing-4px);
 }
 
 .pf-v6-c-form__group-control textarea {
@@ -269,11 +285,6 @@
   color: var(--mui-palette-primary-main);
 }
 
-.pf-v6-c-form-control > :is(input, select, textarea):focus {
-  --pf-v6-c-form-control--OutlineOffset: none;
-  outline: none;
-}
-
 .form-fieldset-wrapper,
 .toolbar-fieldset-wrapper {
   position: relative;
@@ -623,8 +634,8 @@
 }
 
 .pf-v6-c-label__text {
-  padding-right: var(--mui-spacing-8px);
-  padding-left: var(--mui-spacing-8px);
+  padding-right: var(--mui-spacing-4px);
+  padding-left: var(--mui-spacing-4px);
   color: var(--pf-t--global--text--color--inverse);
 }