Make details pane sticky on desktop

closes #234
2026-07-26 18:06:04 +02:00
parent 0b14742a15
commit 8a8d4f3d04
2 changed files with 21 additions and 5 deletions
@@ -97,7 +97,7 @@ main {
  }
 }

-@media (min-width: 550px) {
+@include media-min(small) {
  main {
    &#dashboard {
      grid-column-gap: 4rem;
@@ -107,10 +107,9 @@ main {
        "stats contributions";

      &.with-details {
-        grid-column-gap: 3rem;
-        grid-template-columns: 2fr 4fr 2fr;
+        grid-template-columns: 1fr;
        grid-template-areas:
-          "stats contributions details";
+          "details";
      }
    }

@@ -123,6 +122,23 @@ main {
  }
 }

+@include media-min(medium) {
+  main#dashboard.with-details {
+    grid-column-gap: 3rem;
+    grid-template-columns: 2fr 4fr 2fr;
+    grid-template-areas:
+      "stats contributions details";
+
+    #details {
+      position: sticky;
+      top: 2rem;
+      align-self: start;
+      max-height: calc(100vh - 4rem);
+      overflow-y: auto;
+    }
+  }
+}
+
 main section {
  margin-bottom: 5rem;