lays out sizing select and settings button on widget

Author: joshuarule

ui/dashboard/widgets/widget-wrapper.reel/_widget-wrapper.css

@@ -40,6 +40,10 @@
             max-width: calc(100% - 1em);
         }
     }
+
+    @nest .Sideboard & {
+        width: 100%;
+    }
 }
 
 .WidgetWrapper-removeButton {
@@ -71,7 +75,15 @@
 
 .Widget-sizeSelector {
     position: absolute;
-    top: .5rem;
-    right: 2rem;
+    display: none;
+    bottom: .5rem;
+    left: .5rem;
     font-size: .75em;
+    box-shadow: 0 0 4px 0px rgba(0,0,0,1);
+    z-index: 1;
+
+    @nest .Main.drawer-is-open .Dashboard & {
+        display: block;
+    }
+
 }

ui/dashboard/widgets/widget-wrapper.reel/widget-wrapper.css

@@ -57,12 +57,12 @@
         right: 0;
         bottom: 0;
         border-radius: var(--widget-border-radius);
-        background: rgba(0,0,0,.75);
+        background: rgba(0,0,0,.5);
         transition: visibility .35s ease-in-out, opacity .35s ease-in-out;
-        z-index: 2;
+        z-index: 1;
     }
 
-    @nest .drawer-is-open .has-settings &:before {
+    @nest .drawer-is-open &:before {
         visibility: visible;
         opacity: 1;
     }
@@ -137,14 +137,16 @@
     }
 }
 
+/* Button */
+
 .Widget-info {
     position: absolute;
-    z-index: 10;
-    left: 1em;
-    bottom:  1em;
+    right:   .5em;
+    bottom:  .5em;
     visibility: hidden;
     opacity: 0;
     transition: visibility .35s ease-in-out, opacity .35s ease-in-out;
+    z-index: 1;
 
     @nest .drawer-is-open .has-settings & {
         visibility: visible;