Tidy CSS

app/assets/stylesheets/events.css

@@ -1,12 +1,12 @@
 @layer components {
+  /* Event column layout
+  /* ------------------------------------------------------------------------ */
+
   .events {
     --events-gap: 1ch;
     --events-border: 1px solid var(--color-ink-lighter);
   }
 
-  /* Day
-  /* ------------------------------------------------------------------------ */
-
   .events__day {
     position: relative;
 
@@ -86,7 +86,7 @@
     inset-block-start: calc(var(--events-gap) * -2);
     padding-block: calc(var(--events-gap) * 3) var(--events-gap);
     position: sticky;
-    z-index: var(--events-z-column-header);
+    z-index: var(--z-events-column-header);
   }
 
   .events__time-block {
@@ -116,58 +116,19 @@
     text-align: center;
   }
 
-
-
-
-
-
-
-
-
-  /* Column
-  /* ------------------------------------------------------------------------ */
-
-
-
-
-
-
-
-
-
-
-
-  .events__container {
-    --column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
-    --grid-lines: 1px;
-
-    margin: auto;
-    max-inline-size: min(105ch, 100%);
-  }
-
-
   .events__filter-btn {
     font-weight: 500;
     inline-size: auto;
     margin: auto;
   }
 
-  .events__index {
-    --row-gap: var(--block-space);
-  }
-
-  .events__index-header {
-    min-inline-size: 0;
-
-    h2  {
-      font-weight: 900;
-    }
-  }
-
   .events__popup {
     margin-block-start: var(--block-space-double);
   }
 
+  /* Event
+  /* ------------------------------------------------------------------------ */
+
   .event {
     --column-gap: 0.7ch;
     --panel-border-color: transparent;

app/assets/stylesheets/utilities.css

@@ -26,6 +26,8 @@
   .txt-capitalize { text-transform: capitalize; }
   .txt-link { color: var(--color-link); text-decoration: underline; }
 
+  .font-black { font-weight: 900; }
+
   /* Flexbox and Grid */
   .justify-end { justify-content: end; }
   .justify-start { justify-content: start; }

app/views/events/index.html.erb

@@ -4,8 +4,8 @@
   <nav class="align-start">
     <div class="btn btn--circle btn--placeholder flex-item-justify-start"></div>
 
-    <div class="events__index-header flex-inline flex-column center gap-half margin-block-end-double txt-align-center">
-      <h2 class="txt-large center overflow-ellipsis max-width"><%= Account.sole.name %> / Latest activity</h2>
+    <div class="flex-inline flex-column center gap-half margin-block-end-double txt-align-center min-width">
+      <h2 class="font-black txt-large center overflow-ellipsis max-width"><%= Account.sole.name %> / Latest activity</h2>
       <%= render "events/filter", filter: @filter %>
     </div>