Merge pull request #2660 from basecamp/mobile/tweak-activity-headers

Mobile / Tweak activity headers

Author: adjogima

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;
+        }
+      }
     }
   }
 }

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 %>