fix(bubble): tune head proportions — smaller percent glyph, more breathing room

User feedback on v0.1.13: design works, but the 5h percent glyph in the
head crowds the ring at small bubble sizes (the "100%" string was wider
than the ring's inner clear at MIN_BUBBLE_SIZE).

Two parallel UI/UX reviewers converged on:

- big_font_px ratio:   head_diameter × 26/100 (was 35/100), floor 11
- small_font_px ratio: big × 55/100         (was 45/100), floor 9
- head_pad:            4 logical px         (was 6) — recovers 4px
                       of inner clear at small sizes
- ring_stroke_w:       clamped to [2, 4]    (was floor 2 only)
- label/glyph gap:     big × 15/100, floor 2 (was implicit 0)
- tail_bar_h:          5 logical px         (was 6) — restores
                       proportion against the 3-px head ring stroke

Worked example at MIN_BUBBLE_SIZE=140 (head_diameter=47):
  before: "100%" glyph ≈ 32px wide vs 28px ring inner — overflow
  after:  "100%" glyph ≈ 23px wide vs 32px ring inner — comfortable

Worked example at MAX_BUBBLE_SIZE=360 (head_diameter=138):
  glyph ≈ 70px wide in 124px inner clear (~57%) — confident not crowding

Deliberately not applying:
- drop "7d" label (one reviewer wanted it): rejected — symmetry with
  "5h" matters for self-explanation at a glance, and the ~14px cost is
  acceptable
- head_diameter bump to canvas_h × 1.08: rejected — only useful coupled
  with the label drop

Build clean.
This commit is contained in:
2026-05-23 12:30:18 +07:00
parent 8cbc3dda5b
commit 7bbf80e5f7
+8 -7
View File
@@ -979,8 +979,8 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
let height_px = scale_to_dpi(bubble_height_logical(size_logical), dpi);
let head_diameter = height_px;
let head_pad = scale_to_dpi(6, dpi);
let ring_stroke_w = scale_to_dpi(3, dpi).max(2) as f32;
let head_pad = scale_to_dpi(4, dpi);
let ring_stroke_w = scale_to_dpi(3, dpi).clamp(2, 4) as f32;
let ring_cx = (head_diameter as f32) / 2.0;
let ring_cy = (height_px as f32) / 2.0;
// Ring centerline: midway between outer and inner edge, then keep stroke
@@ -988,13 +988,14 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
let ring_outer = (head_diameter as f32) / 2.0 - (head_pad as f32);
let ring_radius = ring_outer - ring_stroke_w / 2.0;
let big_font_px = (head_diameter * 35 / 100).max(scale_to_dpi(12, dpi));
let small_font_px = ((big_font_px * 45) / 100).max(scale_to_dpi(8, dpi));
let big_font_px = (head_diameter * 26 / 100).max(scale_to_dpi(11, dpi));
let small_font_px = ((big_font_px * 55) / 100).max(scale_to_dpi(9, dpi));
let main_font_px = small_font_px;
let head_label_h = small_font_px + scale_to_dpi(2, dpi);
let head_pct_h = big_font_px + scale_to_dpi(2, dpi);
let head_total_h = head_label_h + head_pct_h;
let label_pct_gap = (big_font_px * 15 / 100).max(scale_to_dpi(2, dpi));
let head_total_h = head_label_h + label_pct_gap + head_pct_h;
let head_text_top = (height_px - head_total_h) / 2;
let head_label_rect = RECT {
left: scale_to_dpi(4, dpi),
@@ -1004,7 +1005,7 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
};
let head_pct_rect = RECT {
left: scale_to_dpi(4, dpi),
top: head_text_top + head_label_h,
top: head_text_top + head_label_h + label_pct_gap,
right: head_diameter - scale_to_dpi(4, dpi),
bottom: head_text_top + head_total_h,
};
@@ -1023,7 +1024,7 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
let tail_bar_left = tail_label_right + pad;
let tail_bar_right =
(tail_countdown_left - pad).max(tail_bar_left + scale_to_dpi(20, dpi));
let tail_bar_h = scale_to_dpi(6, dpi);
let tail_bar_h = scale_to_dpi(5, dpi);
let tail_bar_top = (height_px - tail_bar_h) / 2;
BubbleLayout {