UX: Improving aligment within topic timer modal

UX: Improving aligment within topic timer modal

diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
index 5feaf51..9cd1b0e 100644
--- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
@@ -23,11 +23,12 @@
     margin-bottom: 10px;
   }
   label {
-    vertical-align: middle;
-    display: inline-block;
+    display: inline-flex;
     padding-right: 5px;
+    margin-bottom: 0;
+    align-items: center;
     input {
-      vertical-align: middle;
+      margin-top: 0;
     }
   }
   .btn.pull-right {
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index a1c187a..2f67cf9 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -12,6 +12,7 @@
       .future-date-input-selector-datetime {
         color: lighten($primary, 40%);
         margin-left: 5px;
+        white-space: nowrap;
       }
 
       .future-date-input-selector-icons {
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 6adabd6..874dd6d 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -66,7 +66,6 @@
     outline: none;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     flex-direction: row;
     min-height: 30px;
 
@@ -91,7 +90,8 @@
     }
 
     .caret-icon {
-      margin-left: 5px;
+      margin-left: auto;
+      padding-left: 5px;
       pointer-events: none;
     }

GitHub sha: f0fd8759

1 Like