git.lucas.co / cce-system-interface
system settings
git clone https://git.lucas.co/cce-system-interface.git

commitf80d79eeba2612f0ba5e2d3327d7b1e0c83c3025
parentd5dcd2638a
authorLucas Galante <[email protected]>
date2026-08-01 23:24
feat: pill scrollbars — half-width radius on track and thumb (designer look)

Both scrollbar paint sites: the page ScrollBar widget and
ScrollRegion::push_prims.

Co-Authored-By: Claude Fable 5 <[email protected]>

 src/scroll_bar.rs    | 6 ++++--
 src/scroll_region.rs | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/scroll_bar.rs b/src/scroll_bar.rs
index 3c40d74..390a7dc 100644
--- a/src/scroll_bar.rs
+++ b/src/scroll_bar.rs
@@ -81,7 +81,9 @@ impl cce_ui::widget::Paint for ScrollBar {
 
     fn paint(&self, rect: Rect, ctx: &mut PaintCtx) {
         if self.content_h > self.viewport_h && rect.height > 0.0 {
-            ctx.quad(rect, [0.15, 0.15, 0.20, 0.3]);
+            // Track and thumb are pills — half-width radius (the designer look).
+            let all = (true, true, true, true);
+            ctx.rounded_rect(rect, rect.width.min(rect.height) * 0.5, all, [0.15, 0.15, 0.20, 0.3]);
 
             if let Some((tx, ty, tw, th)) = self.thumb_rect(rect) {
                 let thumb_color = if self.dragging {
@@ -91,7 +93,7 @@ impl cce_ui::widget::Paint for ScrollBar {
                 } else {
                     [0.60, 0.60, 0.65, 0.4]
                 };
-                ctx.quad(Rect { x: tx, y: ty, width: tw, height: th }, thumb_color);
+                ctx.rounded_rect(Rect { x: tx, y: ty, width: tw, height: th }, tw.min(th) * 0.5, all, thumb_color);
             }
         }
     }
diff --git a/src/scroll_region.rs b/src/scroll_region.rs
index c1b05fe..a3d1d45 100644
--- a/src/scroll_region.rs
+++ b/src/scroll_region.rs
@@ -253,9 +253,11 @@ impl ScrollRegion {
             );
         }
         if self.content_h > self.viewport_h {
+            // Track and thumb are pills — half-width radius (the designer look).
             let (sb_x, track_y, sb_w, track_h, thumb_y, thumb_h) = self.scrollbar_geom();
-            pc.rect(cce_ui::color::scrollbar_track_color(), sb_x, track_y, sb_w, track_h);
-            pc.rect(cce_ui::color::scrollbar_thumb_color(), sb_x, thumb_y, sb_w, thumb_h);
+            let all = (true, true, true, true);
+            pc.rect_with_radius_corners(cce_ui::color::scrollbar_track_color(), sb_x, track_y, sb_w, track_h, sb_w.min(track_h) * 0.5, all);
+            pc.rect_with_radius_corners(cce_ui::color::scrollbar_thumb_color(), sb_x, thumb_y, sb_w, thumb_h, sb_w.min(thumb_h) * 0.5, all);
         }
     }
 }