From 449d1e8f0ea54438eee8e4186c92a279a94a9ba2 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sun, 2 Mar 2025 10:32:42 +0100
Subject: [PATCH] fix: what about on small screens you

---
 src/layouts/App.astro | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/layouts/App.astro b/src/layouts/App.astro
index 30bc876..070fc7c 100644
--- a/src/layouts/App.astro
+++ b/src/layouts/App.astro
@@ -90,22 +90,19 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy'
   #app-wrapper {
     padding: 0.5em 0.5em 10em;
     --app-width: 650px;
-    width: 100%;
     max-width: var(--app-width);
+    width: 100%;
     display: grid;
     gap: 1em;
 
     #main-content {
-      width: 100%;
       max-width: calc(var(--app-width) - 2em);
       padding: 0 1em;
 
-      & img,
-      & picture,
-      & video,
-      & canvas,
-      & svg,
-      & iframe,
+      @media (max-width: 650px) {
+        max-width: calc(100vw - 2em);
+      }
+
       & table {
         overflow-x: auto;
         display: block;