From d676565abb4e9a91ef5fc49c9e59975570626146 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 19 Apr 2026 06:59:06 +0200
Subject: [PATCH] fix(ui): refine DateRangePicker calendar button styling

- Fixed size: 1.5rem (small), 2rem (medium) in rem units
- No padding, flex-centered icon
- Inset focus ring using 1px box-shadow with --bui-ring token
- Border radius bumped to radius-2
- Medium size padding-inline-end reduced to space-1

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
---
 .../DateRangePicker.module.css                | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css b/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css
index 701855d690..4bb6b47a82 100644
--- a/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css
+++ b/packages/ui/src/components/DateRangePicker/DateRangePicker.module.css
@@ -82,7 +82,12 @@
     &[data-size='medium'] {
       height: 2.5rem;
       min-width: 290px;
-      padding-inline-end: var(--bui-space-2);
+      padding-inline-end: var(--bui-space-1);
+
+      & .bui-DateRangePickerButton {
+        width: 2rem;
+        height: 2rem;
+      }
     }
   }
 
@@ -177,26 +182,28 @@
   ============================================================ */
 
   .bui-DateRangePickerButton {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
     background: none;
     border: none;
-    padding: var(--bui-space-1);
-    border-radius: var(--bui-radius-1);
+    border-radius: var(--bui-radius-2);
     color: var(--bui-fg-secondary);
     cursor: pointer;
     margin-left: auto;
     transition: color 0.15s ease-in-out;
+    outline: none;
 
     &[data-hovered] {
       color: var(--bui-fg-primary);
     }
 
     &[data-focus-visible] {
-      outline: 2px solid var(--bui-ring);
-      outline-offset: 1px;
+      box-shadow: inset 0 0 0 1px var(--bui-ring);
     }
 
     &[data-pressed] {