Mobile styles

app/assets/stylesheets/_global.css

@@ -33,6 +33,14 @@
   /* Components */
   --btn-size: 2.65em;
 
+  /* Z-index */
+  --z-events-column-header: 1;
+  --z-events-day-header: 2;
+  --z-popup: 10;
+  --z-terminal: 20;
+  --z-tray: 21;
+
+
   /* OKLCH colors: Fixed */
   --lch-black: 0% 0 0;
   --lch-white: 100% 0 0;

app/assets/stylesheets/color-picker.css

@@ -10,7 +10,7 @@
   max-inline-size: var(--panel-size) !important;
   position: absolute;
   translate: 0 -50%;
-  z-index: 2;
+  z-index: var(--z-popup);
 
   &[open] {
     display: flex;

app/assets/stylesheets/events.css

@@ -13,7 +13,14 @@
     /* Don't put borders around empty days */
     &:has(*) {
       border-block-start: var(--events-border);
-      border-inline: var(--events-border);
+
+      @media (min-width: 640px) {
+        border-inline: var(--events-border);
+      }
+    }
+
+    @media (max-width: 639px) {
+      margin-block-end: calc(var(--events-gap) * 2);
     }
   }
 
@@ -35,31 +42,42 @@
     position: absolute;
     inset: 0 auto auto 50%;
     translate: -50% -50%;
-    z-index: 3;
+    z-index: var(--z-events-day-header);
   }
 
   .events__columns {
-    align-items: end;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
     position: relative;
 
-    /* Pseudo column borders since .events__column is display: contents */
-    &:before,
-    &:after {
-      border-inline-start: var(--events-border);
-      content: "";
-      inset-block: 0;
-      position: absolute;
-      z-index: 3;
-    }
+    @media (min-width: 640px) {
+      align-items: end;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
 
-    &:before { inset-inline-start: calc(100% / 3); }
-    &:after { inset-inline-end: calc(100% / 3); }
+      /* Pseudo column borders since .events__column is display: contents */
+      &:before,
+      &:after {
+        border-inline-start: var(--events-border);
+        content: "";
+        inset-block: 0;
+        position: absolute;
+        z-index: var(--z-events-day-header);
+      }
+
+      &:before { inset-inline-start: calc(100% / 3); }
+      &:after { inset-inline-end: calc(100% / 3); }
+    }
   }
 
   .events__column {
-    display: contents;
+    @media (max-width: 639px) {
+      &:not(:has(.event)) {
+        display: none;
+      }
+    }
+
+    @media (min-width: 640px) {
+      display: contents;
+    }
   }
 
   .events__column-header {
@@ -68,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: 2;
+    z-index: var(--events-z-column-header);
   }
 
   .events__time-block {
@@ -77,8 +95,12 @@
     gap: var(--events-gap);
     justify-items: center;
     margin: 0;
-    padding-block-end: calc(var(--events-gap) * 3);
-    padding-inline: calc(var(--events-gap) * 2);
+    padding: 0;
+
+    @media (min-width: 640px) {
+      padding-block-end: calc(var(--events-gap) * 3);
+      padding-inline: calc(var(--events-gap) * 2);
+    }
 
     .event {
       grid-column-start: unset !important;
@@ -94,6 +116,14 @@
     text-align: center;
   }
 
+
+
+
+
+
+
+
+
   /* Column
   /* ------------------------------------------------------------------------ */
 
@@ -145,7 +175,11 @@
 
     margin: var(--inline-space);
     position: relative;
-    z-index: 1;
+    /* z-index: 1; */
+
+    @media (max-width: 639px) {
+      --panel-size: 100%;
+    }
   }
 
   .event--related {
@@ -153,7 +187,7 @@
     --hover-size: 0.15rem;
 
     box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
-    z-index: 2;
+    /* z-index: 2; */
   }
 
   .event__collection {

app/assets/stylesheets/popup.css

@@ -10,14 +10,14 @@
     max-inline-size: min(50ch, 90vw);
     position: absolute;
     transform: translateX(-50%);
-    z-index: 2;
+    z-index: var(--z-popup);
 
     &[open] {
       display: flex;
     }
 
     #header:has(&) {
-      max-inline-size: 100%;
+      max-inline-size: 100vw;
       position: relative;
       z-index: 5;
 
@@ -41,7 +41,7 @@
     .btn {
       --btn-background: transparent;
     }
-    
+
     @media (any-hover: hover) {
       &:hover {
         background: var(--color-selected);
@@ -110,7 +110,7 @@
     .icon {
       margin-inline-end: 0.5em;
     }
-    
+
     padding-inline-start: var(--inline-space-half);
   }
 

app/assets/stylesheets/terminals.css

@@ -9,7 +9,7 @@
     inset: auto 0 0 0;
     padding: var(--block-space) calc(var(--tray-size) + var(--inline-space) * 3);
     position: fixed;
-    z-index: 1;
+    z-index: var(--z-terminal);
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-black);

app/assets/stylesheets/trays.css

@@ -15,7 +15,7 @@
     justify-content: end;
     padding: var(--block-space-half) var(--inline-space) calc(var(--block-space-half) / 2);
     position: fixed;
-    z-index: 2;
+    z-index: var(--z-tray);
 
     .tray__item {
       --offset: calc((var(--position) - 1) * (var(--block-space) * -1));

app/views/events/index.html.erb

@@ -5,7 +5,7 @@
     <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 txt-nowrap center"><%= Account.sole.name %> / Latest activity</h2>
+      <h2 class="txt-large center overflow-ellipsis"><%= Account.sole.name %> / Latest activity</h2>
       <%= render "events/filter", filter: @filter %>
     </div>