From 8a8d4f3d04f33b7c834b7db7d83d5626da3e29e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Sun, 26 Jul 2026 18:06:04 +0200
Subject: [PATCH] Make details pane sticky on desktop

closes #234
---
 app/styles/_layout.scss                       | 24 +++++++++++++++----
 .../components/_contribution-details.scss     |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss
index e65c4ee..bb0f120 100644
--- a/app/styles/_layout.scss
+++ b/app/styles/_layout.scss
@@ -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;
 
diff --git a/app/styles/components/_contribution-details.scss b/app/styles/components/_contribution-details.scss
index bbd2d0f..af086e5 100644
--- a/app/styles/components/_contribution-details.scss
+++ b/app/styles/components/_contribution-details.scss
@@ -137,7 +137,7 @@ section#contribution-details {
 
 // On small screens, hide intro text, contributor and contributions list when
 // showing details
-@include media-max(small) {
+@include media-max(medium) {
   #dashboard.with-details {
     #contributions, #stats {
       display: none;