From 98d019d47b5219fd54b2a5b27f7c1d5eed34c2b8 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 4 Mar 2026 15:36:07 +0100
Subject: [PATCH] Make it a fitted pill shape on iOS

---
 app/assets/stylesheets/ios.css                | 23 +++++++++++++++----
 .../events/day_timeline/_column.html.erb      |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/ios.css b/app/assets/stylesheets/ios.css
index 2242e7c77..128c1afa4 100644
--- a/app/assets/stylesheets/ios.css
+++ b/app/assets/stylesheets/ios.css
@@ -18,10 +18,25 @@
     /* ------------------------------------------------------------------------ */
 
     .events__column-header {
-      -webkit-backdrop-filter: blur(16px);
-      backdrop-filter: blur(16px);
-      background-color: oklch(from var(--color-canvas) l c h / 0.5);
-      border-radius: 10em;
+      background-color: unset;
+
+      & > span {
+        display: inline-block;
+        position: relative;
+
+        &::before {
+          content: "";
+          display: block;
+          background-color: oklch(from var(--color-canvas) l c h / 0.8);
+          -webkit-backdrop-filter: blur(16px);
+          backdrop-filter: blur(16px);
+          border-radius: 10em;
+          position: absolute;
+          inset-inline: -1.5ch;
+          inset-block: calc(var(--events-gap) * -0.8);
+          z-index: -1;
+        }
+      }
     }
   }
 }
diff --git a/app/views/events/day_timeline/_column.html.erb b/app/views/events/day_timeline/_column.html.erb
index 50d35b4e2..0778001f3 100644
--- a/app/views/events/day_timeline/_column.html.erb
+++ b/app/views/events/day_timeline/_column.html.erb
@@ -1,6 +1,6 @@
 <div class="events__column">
   <h3 class="events__column-header">
-    <%= column.title %>
+    <span><%= column.title %></span>
 
     <% if column.events_by_hour.any? %>
       <%= link_to events_day_timeline_column_path(column, day: column.day_timeline.day.to_date), class: "events__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>