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: 1fr;
-        grid-template-columns: 2fr 4fr 2fr;
         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;
 

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;