Fixes mobile issues

1 files changed, 63 insertions, 2 deletions

diff --git a/src/css/style.css b/src/css/style.css
index 8f4b120..5076da9 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -221,7 +221,8 @@ body {
     scrollbar-width: thin;
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    min-height: 100vh;
+    min-height: 100dvh;
 }
 
 /* webkit scrollbar (chrome, safari, edge) */
@@ -590,6 +591,66 @@ nav a:active {
     border-bottom-color: var(--primary);
 }
 
+@media (max-width: 520px) {
+    body {
+        padding: var(--space-sm);
+        padding-top: calc(var(--space-sm) + 3rem);
+        padding-left: calc(var(--space-sm) + env(safe-area-inset-left));
+        padding-right: calc(var(--space-sm) + env(safe-area-inset-right));
+    }
+
+    header {
+        gap: var(--space-sm);
+        padding-left: calc(var(--space-md) + env(safe-area-inset-left));
+        padding-right: calc(var(--space-md) + env(safe-area-inset-right));
+    }
+
+    header nav {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        gap: var(--space-sm);
+        padding: 0.1rem 0;
+    }
+
+    header nav a {
+        white-space: nowrap;
+        padding: 0.35rem 0.4rem;
+    }
+
+    article {
+        padding: var(--space-sm);
+        box-shadow:
+            inset 1px 1px 0 var(--border-light),
+            inset -1px -1px 0 var(--border-dark),
+            2px 2px 0 rgba(0, 0, 0, 0.14),
+            3px 3px 0 rgba(0, 0, 0, 0.06);
+    }
+
+    article h2 {
+        margin: calc(var(--space-sm) * -1) calc(var(--space-sm) * -1) var(--space-sm);
+    }
+
+    table {
+        display: block;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 2px 2px 0
+            rgba(0, 0, 0, 0.12);
+    }
+
+    th,
+    td {
+        padding: var(--space-xs) 0.6rem;
+    }
+
+    pre {
+        padding: var(--space-sm);
+        box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 2px 2px 0
+            rgba(0, 0, 0, 0.12);
+    }
+}
+
 main {
     flex: 1;
 }
@@ -1299,7 +1360,7 @@ button:disabled {
 
 .demo-page .component-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
     gap: var(--space-md);
     margin: var(--space-md) 0;
 }