fix: make the power menu avatar a centred circle

The widget only honours its margin. An explicit width with expand:false
collapses it to a line, and a percentage margin resolves against the whole
window rather than the padded column, which tiled the image across a 2560px
screen. So the width comes from a pixel margin derived from the content
column, and it has to equal the height the row gives the widget (220px) for
the 100% radius to draw a circle instead of an ellipse.

Also bounds the content column, which was previously full screen width: four
options spread across ~640px cells read as scattered glyphs and the selection
highlight became a slab.

Measured from screenshots rather than guessed: the avatar renders 220x220,
ratio 1.000, centred within a pixel.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G6aeE37K4GHBsaM51yLTTq

1 files changed, 21 insertions, 11 deletions

diff --git a/rofi/udt/powermenu.rasi b/rofi/udt/powermenu.rasi
index 864f571..a178865 100644
--- a/rofi/udt/powermenu.rasi
+++ b/rofi/udt/powermenu.rasi
@@ -18,10 +18,14 @@ window {
     padding:          0;
 }
 
+/* The content column is held to a fixed width and centred, rather than letting
+ * it span the whole screen. On a 2560px monitor a full-width mainbox spreads
+ * four options across ~640px cells, so the row reads as four scattered glyphs
+ * and the selection highlight becomes a huge slab. */
 mainbox {
     children: [ dummy, userimage, inputbar, listview, message, dummy ];
     spacing:  24px;
-    padding:  60px;
+    padding:  60px calc(50% - 340px);
 }
 
 /* Flexible spacers above and below push the content block to the middle. */
@@ -29,18 +33,22 @@ dummy {
     expand: true;
 }
 
-/* The avatar.
+/* The avatar, sized by margin rather than by width.
  *
- * Sized by horizontal margin rather than width/height, which is how the
- * original type-4 theme did it: the widget expands to the window and the
- * margin squeezes it back to a square. Setting an explicit width and height
- * instead collapses it and nothing is drawn.
+ * This widget only honours the margin. `width` with `expand: false` collapses
+ * it to a line, and a percentage margin resolves against the whole window
+ * rather than the padded column, which tiled the image across the screen. So
+ * the margin is plain pixels, derived from the content column set by mainbox:
+ * (680 - 220) / 2 = 230.
  *
- * The margin is therefore tied to screen width. It is expressed in calc() from
- * 50% so it stays centered on any monitor, rather than the original's hardcoded
- * 710px, which assumed one specific resolution. */
+ * The height is what the row gives it, 220px, not what is asked for here; the
+ * declaration is kept so the intent is on the record. Width is what actually
+ * has to match it for the 100% radius to draw a circle rather than an ellipse.
+ * Measured from a screenshot, not guessed. Both numbers move together if the
+ * mainbox column width changes. */
 userimage {
-    margin:           0px calc(50% - 70px);
+    height:           220px;
+    margin:           0px 230px;
     background-image: url("~/.user-icon.jpg", both);
     background-color: transparent;
     border:           2px;
@@ -58,6 +66,7 @@ inputbar {
 }
 
 prompt {
+    expand:           true;
     font:             "Noto Sans Bold 28";
     text-color:       @text;
     horizontal-align: 0.5;
@@ -74,8 +83,9 @@ listview {
 }
 
 element {
-    padding:       40px;
+    padding:       24px 0px;
     border-radius: 12px;
+    horizontal-align: 0.5;
 }
 
 /* The entries are single glyphs from a Nerd Font, so they are sized large and