Replace the position buttons with a native Dropdown (9 placements)

The three Position buttons (Bottom/Top/Center) overlapped the label in
the menu's width. Use qs.Ui.Dropdown with the full 3x3 grid — top /
middle / bottom by left / center / right — the display panel already
positions all of them.

Panel.qml

@@ -201,47 +201,23 @@ Panel {
       }
 
       // Position ------------------------------------------------------
-      Item {
+      Dropdown {
+        id: positionDropdown
         width: parent.width
-        height: positionButtons.height
+        label: "Position"
-
+        value: root.position
-        Text {
+        options: [
-          anchors.left: parent.left
+          { value: "top-left", label: "Top left" },
-          anchors.verticalCenter: parent.verticalCenter
+          { value: "top-center", label: "Top center" },
-          text: "Position"
+          { value: "top-right", label: "Top right" },
-          font.family: Style.font.family
+          { value: "center-left", label: "Middle left" },
-          font.pixelSize: Style.font.body
+          { value: "center-center", label: "Middle center" },
-          color: Color.popups.text
+          { value: "center-right", label: "Middle right" },
-        }
+          { value: "bottom-left", label: "Bottom left" },
-
+          { value: "bottom-center", label: "Bottom center" },
-        Row {
+          { value: "bottom-right", label: "Bottom right" }
-          id: positionButtons
+        ]
-          anchors.right: parent.right
+        onChanged: function(v) { root.writeConfig({ position: v }) }
-          anchors.verticalCenter: parent.verticalCenter
-          spacing: Style.spacing.xs
-
-          Button {
-            text: "Bottom"
-            selected: root.position.indexOf("bottom") !== -1
-            foreground: Color.popups.text
-            accent: Color.accent
-            onClicked: root.writeConfig({ position: "bottom-center" })
-          }
-          Button {
-            text: "Top"
-            selected: root.position.indexOf("top") !== -1
-            foreground: Color.popups.text
-            accent: Color.accent
-            onClicked: root.writeConfig({ position: "top-center" })
-          }
-          Button {
-            text: "Center"
-            selected: root.position === "center"
-            foreground: Color.popups.text
-            accent: Color.accent
-            onClicked: root.writeConfig({ position: "center" })
-          }
-        }
       }
     }
   }

README.md

@@ -63,7 +63,8 @@ menu, following the native bar-widget pattern:
 - **Show keys** — toggle that pauses/resumes the display (useful mid-demo).
   The glyph button itself does not toggle; the menu does.
 - **Mode** — `All keys` or `Bindings only` (only combos with a modifier).
-- **Position** — `Bottom`, `Top`, or `Center` of the screen.
+- **Position** — a dropdown with all nine placements (top/middle/bottom
+  × left/center/right) of the screen.
 
 The menu writes the same pause flag and `config.json` that the display
 panel watches, so it stays in sync across monitors. You can also drive it
@@ -138,7 +139,7 @@ the plugin on every edit. Editing this file updates the display live:
 | Option      | Values                                             | Default         |
 |-------------|----------------------------------------------------|-----------------|
 | `mode`      | `all` or `bindings` (only combos with a modifier)  | `all`           |
-| `position`  | `bottom-center`, `top-center`, `center`, `top-left`, `bottom-right`, … | `bottom-center` |
+| `position`  | any of the nine: `top-left` … `bottom-right`, plus `center` | `bottom-center` |
 | `margin`    | px from the screen edge                            | `67`            |
 | `lingerMs`  | ms a released combo stays (keyviz defaults to `5000`) | `1000`       |