Add delay to dashboard shortcuts to wait for menu to close fully.

modules/menus/DropdownMenu.js

@@ -44,6 +44,16 @@ const moveBoxToCursor = (self, fixed) => {
   });
 };
 
+// NOTE: We make the window visible for 2 seconds (on startup) so the child
+// elements can allocat their proper dimensions.
+// Otherwise the width that we rely on for menu positioning is set improperly
+// for the first time we open a menu of each type.
+const initRender = Variable(true);
+
+setTimeout(() => {
+  initRender.value = false;
+}, 2000);
+
 export default ({
   name,
   child,
@@ -57,7 +67,7 @@ export default ({
     name,
     class_names: [name, "dropdown-menu"],
     setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
-    visible: true,
+    visible: initRender.bind("value"),
     keymode: "on-demand",
     exclusivity,
     layer: "top",
@@ -67,10 +77,11 @@ export default ({
       on_primary_click: () => App.closeWindow(name),
       on_secondary_click: () => App.closeWindow(name),
       child: Widget.Box({
+        class_name: "top-eb",
         vertical: true,
         children: [
           Widget.EventBox({
-            class_name: "event-top-padding",
+            class_name: "mid-eb event-top-padding",
             hexpand: true,
             vexpand: false,
             can_focus: false,
@@ -81,7 +92,7 @@ export default ({
             },
           }),
           Widget.EventBox({
-            class_name: "menu-event-box",
+            class_name: "in-eb menu-event-box",
             on_primary_click: () => {
               return true;
             },

modules/menus/dashboard/shortcuts/index.js

@@ -15,15 +15,18 @@ const Shortcuts = () => {
   });
   const handleClick = (action, resolver) => {
     App.closeWindow("dashboardmenu");
-    Utils.execAsync(action)
-      .then((res) => {
-        if (typeof resolver === "function") {
-          return resolver(res);
-        }
 
-        return res;
+    setTimeout(() => {
-      })
+      Utils.execAsync(action)
-      .catch((err) => err);
+        .then((res) => {
+          if (typeof resolver === "function") {
+            return resolver(res);
+          }
+
+          return res;
+        })
+        .catch((err) => err);
+    }, 250);
   };
 
   const recordingDropdown = Widget.Menu({

scss/main.scss

@@ -40,3 +40,18 @@
 
 //notifications
 @import "notifications/popups";
+
+// Eventbox styling for debugging purposes
+// .parent-event {
+//   background-color: $red;
+// }
+// .mid-eb {
+//   background-color: $red;
+// }
+// .in-eb {
+//   background-color: $red;
+// }
+// .main-eb {
+//   background-color: $red;
+// }
+//

scss/menus/media.scss

@@ -1,7 +1,7 @@
 @import "../colors";
 
 .menu-items-container.media {
-  min-width: 25em;
+  min-width: 23em;
   min-height: 10em;
 
   .menu-section-container {

scss/menus/menu.scss

@@ -94,14 +94,14 @@ tooltip label {
     background: $crust;
     border: .13em solid $surface0;
     border-radius: .7rem;
-    min-width: 20em;
+    min-width: 18em;
     color: $text;
 }
 
 .menu-items-container {
     border-radius: 0.4em;
     font-size: 1.3em;
-    min-width: 20em;
+    min-width: 18em;
 }
 
 .menu-section-container {

style.css

@@ -512,14 +512,14 @@ tooltip label {
   background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.7rem;
-  min-width: 20em;
+  min-width: 18em;
   color: #cdd6f4;
 }
 
 .menu-items-container {
   border-radius: 0.4em;
   font-size: 1.3em;
-  min-width: 20em;
+  min-width: 18em;
 }
 
 .menu-section-container {
@@ -1036,7 +1036,7 @@ window#powermenu .powermenu.box {
 }
 
 .menu-items-container.media {
-  min-width: 25em;
+  min-width: 23em;
   min-height: 10em;
 }
 .menu-items-container.media .menu-section-container {