Fix mobile layout (#14)

Sets the width from 40em (40 capital `M` wide) to 90% of the viewport
width on mobile.

Fixes #13 

<img width="2335" alt="image"
src="https://github.com/user-attachments/assets/fd28cecd-0143-4854-b4c7-8c106f4eafe7"
/>
<img width="2557" alt="image"
src="https://github.com/user-attachments/assets/af1e0ce6-7bb7-467b-aef6-4f077be339e7"
/>

Code blocks are scrollable:
<img width="416" alt="image"
src="https://github.com/user-attachments/assets/41434315-7a1d-4a89-9c40-656b07cbb1c8"
/>

Also wanted to say while I'm here: Thank you for bevy lint!

Co-authored-by: Caleb Meyer <Caleb.Meyer@Hy-Vee.com>

Author: calebmeyer

src/routes/+layout.svelte

@@ -36,15 +36,21 @@
     grid-template-columns: 1fr 2fr;
   }
 
+  /* Prevent elements that cannot wrap from stealing screen space from the nav bar. */
+  .container main {
+    max-width: 40em;
+  }
+
   /* When on mobile, switch to a single-column grid. */
   @media (width <= 820px) {
     .container {
       grid-template-columns: 1fr !important;
     }
-  }
 
-  /* Prevent elements that cannot wrap from stealing screen space from the nav bar. */
-  .container main {
-    max-width: 40em;
+    .container main {
+      /* 90% of the viewport width */
+      max-width: 90vw;
+    }
   }
+
 </style>