Merge pull request #553 from bond95/align-disk-delete

Fixed align of Delete buttons for Disks
oVirt · Apr 12, 2018 · 8fac225 · 8fac225
2 parents 503ac5e + d0038c3
commit 8fac225
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/components/VmDisks/VmDisk.js b/src/components/VmDisks/VmDisk.js
@@ -93,16 +93,17 @@ class VmDisk extends React.PureComponent {
 
     return (
       <li>
-        <span id={`${idPrefix}`}>
+        <span className={style['vmdisk-item-info']} id={`${idPrefix}`}>
           {name}
           &nbsp;
           {capacityInfo}
           {bootable}
           {inactive}
-          &nbsp;
+        </span>
+        <span className={style['vmdisk-item-delete']}>
           {deleteButton}
-          {deletionConfirmationDialog}
         </span>
+        {deletionConfirmationDialog}
       </li>
     )
   }

diff --git a/src/components/VmDisks/style.css b/src/components/VmDisks/style.css
@@ -8,12 +8,14 @@
     list-style-type: none;
     padding: 0;
     margin-bottom: 0px !important;
+    display: table;
 }
 
 .smaller {
     font-size: 50%;
     vertical-align: middle;
     margin-left: 0.5em;
+    display: inline-block;
 }
 
 .light {
@@ -27,3 +29,22 @@
     font-size: small;
     cursor: pointer;
 }
+
+.disks-list li {
+    display: table-row;
+}
+
+.disks-list li > span {
+    display: table-cell;
+}
+
+.vmdisk-item-info > *:last-child {
+    margin-right: 5px;
+}
+
+.vmdisk-item-delete {
+    vertical-align: middle;
+}
+.vmdisk-item-delete button {
+    display: block;
+}