style fixes to smart draw controls

2 files changed, 40 insertions, 33 deletions

diff --git a/src/client/views/smartdraw/SmartDrawHandler.scss b/src/client/views/smartdraw/SmartDrawHandler.scss
index 0e8bd3349..745e00a99 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.scss
+++ b/src/client/views/smartdraw/SmartDrawHandler.scss
@@ -1,44 +1,52 @@
 .smart-draw-handler {
     position: absolute;
-}
-
-.smartdraw-input {
-    color: black;
-}
-
-.smartdraw-options {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+    width: 265px;
 
-    .auto-color {
+    .smart-draw-main {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 30%;
-    }
+        flex-direction: row;
+        margin-bottom: 5px;
 
-    .complexity {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 31%;
+        .smartdraw-input {
+            color: black;
+            margin: auto;
+        }
     }
 
-    .size {
+    .smartdraw-options {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 39%;
+        flex-direction: row;
+        justify-content: space-around;
 
-        .size-slider {
-            width: 80%;
+        .auto-color {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 30%;
+        }
+
+        .complexity {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 31%;
+        }
+
+        .size {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 39%;
+
+            .size-slider {
+                width: 80%;
+            }
         }
     }
-}
 
-.regenerate-box,
-.edit-box {
-    display: flex;
-    flex-direction: row;
+    .regenerate-box,
+    .edit-box {
+        display: flex;
+        flex-direction: row;
+    }
 }
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 83360bb6e..de2c0a4ce 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -345,7 +345,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     renderDisplay() {
         return (
             <div
-                id="label-handler"
                 className="smart-draw-handler"
                 style={{
                     display: this._display ? '' : 'none',
@@ -354,7 +353,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                     background: SettingsManager.userBackgroundColor,
                     color: SettingsManager.userColor,
                 }}>
-                <div>
+                <div className="smart-draw-main">
                     <IconButton
                         tooltip="Cancel"
                         onClick={() => {