Size the bar icon to match, and close the gap to the label

Three separate contributors, only one of which was the obvious one:

- The glyph rendered at Style.bar.iconFont (26px at base-size 24), noticeably
  smaller than the Offscale mark beside it. Now space(20) = 40px, with the
  canvas sized to hold it.

- The label sat ~19px from the icon. Most of that was not the Row spacing but
  WidgetButton's own horizontalMargin, which defaults to 8.5 and lands at
  ~17px per side at this scale. Trimming the slot and the spacing barely moved
  it until that came down too.

- Trimming the slot flush to the glyph left nothing between this icon and the
  Offscale mark to its left: bar sections lay out with spacing: 0, so
  separation only ever comes from slack each widget reserves. Hence an
  explicit leading spacer rather than relying on the section.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-17 18:01:17 +01:00
co-authored by Claude Opus 5
parent a52ef3c46c
commit 0b520d97ac
+27 -1
View File
@@ -391,7 +391,17 @@ Panel {
Row {
id: barContent
anchors.fill: parent
spacing: Style.space(4)
spacing: Style.space(1)
// Bar sections lay their widgets out with spacing: 0, so separation between
// neighbouring widgets comes from whatever slack each one reserves. The
// slot is trimmed tight to the glyph below, which leaves nothing between
// this icon and the Offscale mark to its left — hence an explicit spacer.
Item {
width: Style.space(7)
height: 1
anchors.verticalCenter: parent.verticalCenter
}
BarIconButton {
id: button
@@ -399,6 +409,18 @@ Panel {
bar: root.bar
text: "󱚣"
active: root.alarming
// Stock draws this glyph at Style.bar.iconFont (26px at base-size 24)
// inside a Style.bar.iconCanvas box (32px), in a Style.bar.iconSlot of
// reserved width (54px). That left the mark small next to the Offscale
// logo, and ~11px of dead slot either side of it — which read as the
// label floating away from the icon.
//
// Sized to match the Offscale mark (32px), with the canvas just big
// enough to hold it and the slot trimmed to the canvas so the label sits
// right beside the glyph rather than beyond its padding.
fontSize: Style.space(20)
opticalSize: Style.space(21)
slotSize: Style.space(21)
onPressed: function(buttonCode) {
if (buttonCode === Qt.RightButton) root.launchAgent()
else if (buttonCode === Qt.MiddleButton) root.selectProvider(root.providerIndex + 1)
@@ -419,6 +441,10 @@ Panel {
// A step below the icon font: it is a label, not a glyph, and the bar is
// crowded.
fontSize: Style.font.bodySmall
// WidgetButton defaults horizontalMargin to 8.5, which at this scale is
// ~17px of padding on each side — that, not the Row spacing, was what
// held the label away from the icon.
horizontalMargin: 1
anchors.verticalCenter: parent.verticalCenter
onPressed: function(buttonCode) {
if (buttonCode === Qt.RightButton) root.launchAgent()