From 5060f612b55ca7ee7aa5faa6f237d4cae457c7d8 Mon Sep 17 00:00:00 2001
From: KRIS LIEW <39853992+krisliew@users.noreply.github.com>
Date: Wed, 9 Jun 2021 16:37:22 +0800
Subject: [PATCH] UI update

---
 content/pages/editAdvanceSettings.json           |  2 +-
 .../FormFields/Credential/Credential.module.css  | 12 +++++++++++-
 .../molecules/FormFields/Credential/index.tsx    | 16 +++++++++-------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/content/pages/editAdvanceSettings.json b/content/pages/editAdvanceSettings.json
index 4a230963a..99a2abe3f 100644
--- a/content/pages/editAdvanceSettings.json
+++ b/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",
diff --git a/src/components/molecules/FormFields/Credential/Credential.module.css b/src/components/molecules/FormFields/Credential/Credential.module.css
index 643d469ba..1b14d5d98 100644
--- a/src/components/molecules/FormFields/Credential/Credential.module.css
+++ b/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;
diff --git a/src/components/molecules/FormFields/Credential/index.tsx b/src/components/molecules/FormFields/Credential/index.tsx
index 6982f012f..8906e1b19 100644
--- a/src/components/molecules/FormFields/Credential/index.tsx
+++ b/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
-                  className={styles.crossButton}
-                  style="text"
-                  onClick={(even) => handleDeleteChip(value)}
-                >
-                  <Cross />
-                </Button>
+                <span className={styles.buttonWrapper}>
+                  <Button
+                    className={styles.crossButton}
+                    style="text"
+                    onClick={(even) => handleDeleteChip(value)}
+                  >
+                    <Cross />
+                  </Button>
+                </span>
               </div>
             )
           })}