From edf4a419ea1b6e705398c51fbcc0396fb3ffe6b9 Mon Sep 17 00:00:00 2001
From: Philippa Markovics <philippa@markovics.com>
Date: Tue, 10 Oct 2023 12:14:31 +0200
Subject: [PATCH] Use container queries to size content

---
 resources/stylesheets/viewer.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/stylesheets/viewer.css b/resources/stylesheets/viewer.css
index 8c8046f27..602fa846b 100644
--- a/resources/stylesheets/viewer.css
+++ b/resources/stylesheets/viewer.css
@@ -109,6 +109,10 @@
 .max-w-prose { @apply max-w-[46rem] !important; }
 .max-w-wide  { @apply max-w-3xl !important; }
 
+.notebook-viewer {
+    container-type: inline-size;
+}
+
 /* List Styles */
 /* --------------------------------------------------------------- */
 
@@ -135,7 +139,7 @@
 .code-viewer .cm-content {
   @apply py-4 px-8;
 }
-@media (min-width: 960px){
+@container (width > 959px) {
     .notebook-viewer .code-viewer .cm-content {
         @apply pl-12;
     }
@@ -320,7 +324,7 @@
 .sidenote-container {
   @apply mb-4;
 }
-@media (min-width: 860px) {
+@container (width > 859px) {
   .sidenote sup { @apply inline; }
   .sidenote-column {
     @apply w-[165px] absolute right-0 top-0 -mr-[205px];
@@ -358,7 +362,7 @@
 .result-viewer figure {
   @apply mt-0 !important;
 }
-@media (min-width: 768px) {
+@container (width > 767px) {
   .devcard-desc > div {
     @apply max-w-full m-0;
   }