Improved layout on smaller devices

src/lib/components/FooterComponent.svelte

@@ -58,7 +58,7 @@
       background-color: var(--color-grey-translucent);
     }
   }
-  @media only screen and (max-device-width: 620px) {
+  @media only screen and (max-width: 620px) {
     .mastodonInstance,
     .feedSuffix {
       display: none;
@@ -68,7 +68,7 @@
     }
   }
 
-  @media only screen and (max-device-width: 430px) {
+  @media only screen and (max-width: 430px) {
     .mastodonInstance,
     .feedSuffix,
     .secretIngredient {
@@ -76,7 +76,7 @@
     }
   }
 
-  @media only screen and (max-device-width: 370px) {
+  @media only screen and (max-width: 370px) {
     .label {
       display: none;
     }

src/routes/+layout.svelte

@@ -34,9 +34,9 @@
     align-items: center;
     gap: 10px;
   }
-  @media only screen and (max-device-width: 620px) {
+  @media only screen and (max-width: 620px) {
     .footer {
-      width: calc(100% + 16px);
+      width: 100%;
     }
   }
 </style>

src/routes/+page.svelte

@@ -202,9 +202,10 @@
     z-index: 100;
   }
 
-  @media only screen and (max-device-width: 650px) {
+  @media only screen and (max-width: 650px) {
     .post {
-      max-width: 100vw;
+      max-width: calc(100vw - 16px);
+      padding: 1em 0;
     }
   }
 </style>