src/bar/workspaces.rs

@@ -184,7 +184,19 @@ pub fn make_dot_button(
     btn.set_halign(gtk4::Align::Center);
     btn.set_vexpand(false);
     btn.set_hexpand(false);
-    btn.set_size_request(dot_widths[dot_width_index(windows)], 6);
+    // Height is a deliberate departure from `04-spotlight.html`'s own 6px
+    // (see the demo's `.dots button { height: 6px }`): reported as "too
+    // small and hard to click" — the click-target enlargement is a
+    // separate, non-visual fix elsewhere, but 6px is also genuinely hard
+    // to *see* on a real display, not just hard to hit. 9px keeps the
+    // dots reading as slim pills rather than growing into little chips
+    // (which would fight the capsule's minimal, text-first look), while
+    // being clearly perceptible against the 36px-tall bar. Widths are left
+    // exactly as `dot_widths` (the manifest's own per-occupancy encoding,
+    // e.g. `[6, 10, 14, 18]`) specifies — only the height, which has no
+    // manifest token of its own, is breadbar's call to make.
+    const DOT_HEIGHT: i32 = 9;
+    btn.set_size_request(dot_widths[dot_width_index(windows)], DOT_HEIGHT);
     btn.connect_clicked(move |_| {
         relm4::spawn(async move {
             switch_workspace(id).await;

src/theme.rs

@@ -180,9 +180,17 @@ fn load_css() -> String {
         bread_theme::shell::WorkspaceStyle::Dots => {
             let accent = theme.tokens().accent_from();
             format!(
+                // 9px, not the demo's 6px — kept in sync with
+                // `bar::workspaces::make_dot_button`'s `DOT_HEIGHT` const,
+                // which is the value that actually governs the rendered
+                // size (a direct `set_size_request`, not CSS min-height
+                // participating in layout the normal way) — see that
+                // constant's own doc comment for why. This min-height
+                // exists mainly so the property isn't silently absent from
+                // the stylesheet a reader would expect to define it.
                 ".workspace-dot {{ background-color: alpha(@on-bg, 0.35); color: transparent;\
                      border-radius: {radius_pill}; border: none; outline: none; box-shadow: none;\
-                     min-height: 6px; margin: 0; padding: 0;\
+                     min-height: 9px; margin: 0; padding: 0;\
                      transition: background-color 0.25s {spring_settle},\
                          opacity 0.25s {spring_settle}; }}\
                  .workspace-dot:hover {{ background-color: alpha(@on-bg, 0.55); }}\