fix(shell): concentric hover-highlight radius on host cards

The FlowBoxChild draws the hover/selection highlight AROUND the card
(it wraps it with its own padding ring), so its default corner radius
ran visibly tighter than the card's 12px inside it. The host grids now
scope a 15px radius onto their children — card radius + the ring — so
the highlight's corners run concentric with the card's.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-07 22:37:09 +02:00
parent 4543a3f529
commit 8926d82a80
3 changed files with 21 additions and 3 deletions
+4
View File
@@ -23,6 +23,10 @@ pub const APP_ID: &str = "io.unom.Punktfunk";
/// named palette so dark mode just works.
const CSS: &str = "
.pf-host-card { padding: 16px; }
/* The FlowBoxChild draws the hover/selection highlight AROUND the card (it wraps it
with its own padding), so its corners must run concentric with the card's 12px —
radius = card radius + the child's padding ring. */
.pf-host-grid > flowboxchild { border-radius: 15px; }
.pf-pill { font-size: 0.72em; font-weight: bold; padding: 2px 10px; border-radius: 999px;
color: alpha(currentColor, 0.8); background: alpha(currentColor, 0.1); }
.pf-pill.pf-green { color: @success_color; background: alpha(@success_color, 0.15); }
+5 -2
View File
@@ -386,7 +386,7 @@ impl SimpleComponent for HostsPage {
sender: ComponentSender<Self>,
) -> ComponentParts<Self> {
let make_flow = || {
gtk::FlowBox::builder()
let f = gtk::FlowBox::builder()
.selection_mode(gtk::SelectionMode::None)
.activate_on_single_click(true)
.homogeneous(true)
@@ -394,7 +394,10 @@ impl SimpleComponent for HostsPage {
.max_children_per_line(4)
.column_spacing(12)
.row_spacing(12)
.build()
.build();
// Scopes the concentric hover-highlight radius (see app.rs CSS).
f.add_css_class("pf-host-grid");
f
};
let heading = |text: &str| {
let l = gtk::Label::new(Some(text));