From 88797a5c8b79ab788717d8c1f78ca4962320e25f Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 11 Sep 2026 10:09:27 +0200 Subject: 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 Claude-Session: https://claude.ai/code/session_01G6aeE37K4GHBsaM51yLTTq --- rofi/udt/powermenu.rasi | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) (limited to 'rofi') 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 -- cgit v1.2.3