fix: align the disk/node conditions in a vertical way within edit dis…

…k modal Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · Oct 15, 2024 · 05d8d91 · 05d8d91
1 parent b982e53
commit 05d8d91
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 4 deletions.
diff --git a/src/routes/host/components/EditableDiskItem.js b/src/routes/host/components/EditableDiskItem.js
@@ -42,7 +42,7 @@ function EditableDiskItem({ isNew, disk, form, onRestore, onRemove, validatePath
           <div className={styles.label}>
             Conditions
           </div>
-          <div className={styles.control} style={{ width: '690px', lineHeight: '40px', display: 'flex', padding: '0 15px' }}>
+          <div className={styles.control} style={{ lineHeight: '40px' }}>
             {disk && disk.conditions && Object.keys(disk.conditions).map((key) => {
               let title = (<div>
                 {disk.conditions[key] && disk.conditions[key].lastProbeTime && disk.conditions[key].lastProbeTime ? <div style={{ marginBottom: 5 }}>Last Probe Time: {formatDate(disk.conditions[key].lastProbeTime)}</div> : ''}

diff --git a/src/routes/host/components/EditableDiskItem.less b/src/routes/host/components/EditableDiskItem.less
@@ -18,9 +18,8 @@
       width: 100%;
     }
     .control {
-      padding: 5px 7px;
+      padding: 5px 14px;
       width: 100%;
     }
-
   }
 }
diff --git a/src/routes/host/components/EditableDiskList.js b/src/routes/host/components/EditableDiskList.js
@@ -199,7 +199,7 @@ class EditableDiskList extends React.Component {
             <div className={styles.label}>
               Conditions
             </div>
-            <div className={styles.control} style={{ width: '690px', lineHeight: '40px', display: 'flex' }}>
+            <div className={styles.control} style={{ lineHeight: '40px' }}>
               {node && node.conditions && Object.keys(node.conditions).map((key) => {
                 let title = (<div>
                   {node.conditions[key] && node.conditions[key].lastProbeTime && node.conditions[key].lastProbeTime ? <div style={{ marginBottom: 5 }}>Last Probe Time: {formatDate(node.conditions[key].lastProbeTime)}</div> : ''}