UI update

content/pages/editAdvanceSettings.json

@@ -20,7 +20,7 @@
         "type": "credential"
       },
       {
-        "name": "isDisable",
+        "name": "isOrderDisabled",
         "label": "Disable Consumption",
         "help": "Disable dataset being consume when dataset undergoing maintenance.",
         "type": "checkbox",

src/components/molecules/FormFields/Credential/Credential.module.css

@@ -23,19 +23,29 @@
   display: block;
 }
 
+.buttonWrapper {
+  width: 100%;
+  text-align: right;
+}
+
+.crossButton {
+  min-width: 0;
+}
+
 .crossButton svg {
   display: inline-block;
   width: var(--font-size-large);
   height: var(--font-size-large);
   fill: var(--brand-pink);
   transform: rotate(90deg);
+  vertical-align: middle;
 }
 
 .scroll {
   border-top: 1px solid var(--border-color);
   margin-top: calc(var(--spacer) / 4);
   min-height: fit-content;
-  max-height: 50vh;
+  max-height: 200px;
   position: relative;
   overflow: auto;
   -webkit-overflow-scrolling: touch;

src/components/molecules/FormFields/Credential/index.tsx

@@ -63,13 +63,15 @@ export default function Credential(props: InputProps) {
             return (
               <div className={styles.chip} key={value}>
                 {value}
-                <Button
+                <span className={styles.buttonWrapper}>
-                  className={styles.crossButton}
+                  <Button
-                  style="text"
+                    className={styles.crossButton}
-                  onClick={(even) => handleDeleteChip(value)}
+                    style="text"
-                >
+                    onClick={(even) => handleDeleteChip(value)}
-                  <Cross />
+                  >
-                </Button>
+                    <Cross />
+                  </Button>
+                </span>
               </div>
             )
           })}