Unpin program descriptions and make grid scrollable instead

Same as previous commit, for programmes.html.

Also auto-fit rather than auto-fill, to close the gap between the grid
and the description.

2 files changed, 26 insertions, 3 deletions

diff --git a/actualités.css b/actualités.css
index ea439ac..41a0a41 100644
--- a/actualités.css
+++ b/actualités.css
@@ -29,7 +29,7 @@ main > div {
 .events {
     display: grid;
     grid-auto-rows: 12em;
-    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
     grid-gap: 0.8em;
 }
 
diff --git a/programmes.css b/programmes.css
index 6b22e23..10f05c4 100644
--- a/programmes.css
+++ b/programmes.css
@@ -4,13 +4,32 @@ main {
 }
 
 main > div {
-    padding: 2%;
+    padding: 1em;
+    overflow: auto;
+}
+
+#program-list {
+    max-height: 60vh;
+    scrollbar-width: thin;
+    scrollbar-color: darkblue #8ad;
+}
+
+#program-list::-webkit-scrollbar {
+    width: 0.25em;
+}
+
+#program-list::-webkit-scrollbar-track {
+    background: #8ad;
+}
+
+#program-list::-webkit-scrollbar-thumb {
+    background: darkblue;
 }
 
 .programs {
     display: grid;
     grid-auto-rows: 10em;
-    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
     grid-gap: 0.8em;
 }
 
@@ -48,3 +67,7 @@ main > div {
 details summary .duration {
     font-family: monospace;
 }
+
+.details.active > *:first-child {
+    margin-top: 0;
+}