Handle dynamically sized menus.

modules/menus/DropdownMenu.js

@@ -9,11 +9,14 @@ export const Padding = (name) =>
     setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
   });
 
-const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
+const moveBoxToCursor = (self, fixed) => {
   if (fixed) {
     return;
   }
+
   globalMousePos.connect("changed", ({ value }) => {
+    const currentWidth = self.child.get_allocation().width;
+
     let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
     let monHeight = hyprland.monitors[hyprland.active.monitor.id].height;
 
@@ -22,19 +25,19 @@ const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
       [monWidth, monHeight] = [monHeight, monWidth];
     }
 
-    let marginRight = monWidth - minWidth / 2;
+    let marginRight = monWidth - currentWidth / 2;
     marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
-    let marginLeft = monWidth - minWidth - marginRight;
+    let marginLeft = monWidth - currentWidth - marginRight;
 
     if (marginRight < 0) {
       marginRight = 13;
-      marginLeft = monWidth - minWidth - 13;
+      marginLeft = monWidth - currentWidth - 13;
     } else if (marginRight < 13) {
       marginRight = 13;
-      marginLeft = monWidth - minWidth - 13;
+      marginLeft = monWidth - currentWidth - 13;
     }
     const marginTop = 45;
-    const marginBottom = monHeight + minHeight - marginTop;
+    const marginBottom = monHeight - marginTop;
     self.set_margin_left(marginLeft);
     self.set_margin_right(marginRight);
     self.set_margin_bottom(marginBottom);
@@ -46,8 +49,6 @@ export default ({
   child,
   layout = "center",
   transition,
-  minWidth = 400,
-  minHeight = 200,
   exclusivity = "ignore",
   fixed = false,
   ...props
@@ -56,7 +57,7 @@ export default ({
     name,
     class_names: [name, "dropdown-menu"],
     setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
-    visible: false,
+    visible: true,
     keymode: "on-demand",
     exclusivity,
     layer: "top",
@@ -88,7 +89,7 @@ export default ({
               return true;
             },
             setup: (self) => {
-              moveBoxToCursor(self, minWidth, minHeight, fixed);
+              moveBoxToCursor(self, fixed);
             },
             child: Widget.Box({
               class_name: "dropdown-menu-container",

scss/menus/media.scss

@@ -1,8 +1,8 @@
 @import "../colors";
 
 .menu-items-container.media {
-  min-width: 30.5em;
-  min-height: 15em;
+  min-width: 25em;
+  min-height: 10em;
 
   .menu-section-container {
     margin: 1em 0em;
@@ -59,7 +59,7 @@
     background: $lavender;
     color: $crust;
     min-height: 1.8em;
-    min-width: 2em;
+    min-width: 2.5em;
     border-radius: 0.2rem;
 
     &.disabled {

scss/menus/menu.scss

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

style.css

@@ -512,13 +512,14 @@ tooltip label {
   background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.7rem;
-  min-width: 400px;
+  min-width: 20em;
   color: #cdd6f4;
 }
 
 .menu-items-container {
   border-radius: 0.4em;
-  min-width: 400px;
+  font-size: 1.3em;
+  min-width: 20em;
 }
 
 .menu-section-container {
@@ -1035,8 +1036,8 @@ window#powermenu .powermenu.box {
 }
 
 .menu-items-container.media {
-  min-width: 30.5em;
-  min-height: 15em;
+  min-width: 25em;
+  min-height: 10em;
 }
 .menu-items-container.media .menu-section-container {
   margin: 1em 0em;
@@ -1082,7 +1083,7 @@ window#powermenu .powermenu.box {
   background: #b4befe;
   color: #11111b;
   min-height: 1.8em;
-  min-width: 2em;
+  min-width: 2.5em;
   border-radius: 0.2rem;
 }
 .menu-items-container.media .media-indicator-control-button.disabled {