style: fix code block responsiveness and container widths

Author: m0ver

assets/css/style.css

@@ -2,6 +2,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
 
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 :root {
     --font-primary: 'Inter', sans-serif;
     --font-heading: 'Outfit', sans-serif;
@@ -83,6 +87,12 @@ body {
     overflow-x: hidden;
 }
 
+/* Ensure images don't overflow */
+img, video {
+    max-width: 100%;
+    height: auto;
+}
+
 /* Sidebar */
 .sidebar {
     width: var(--sidebar-width);
@@ -279,6 +289,7 @@ body {
     gap: 2rem;
     max-width: 1400px;
     /* Limit max width */
+    min-width: 0;
 }
 
 /* Cards */
@@ -290,6 +301,8 @@ body {
     padding: 2rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     margin-bottom: 2rem;
+    min-width: 0;
+    width: 100%;
 }
 
 .card h3 {
@@ -310,8 +323,15 @@ body {
     font-family: 'Fira Code', monospace;
     font-size: 0.9rem;
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
     position: relative;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    width: 100%;
+}
+
+.code-block pre {
+    margin: 0;
+    white-space: pre;
 }
 
 .code-header {
@@ -552,19 +572,39 @@ footer {
 
     .main-content {
         margin-left: 0;
+        width: 100%;
     }
 
     .content-wrapper {
-        padding: 0 1.5rem;
+        padding: 0 1rem;
         margin-top: -2rem;
+        width: 100%;
+        max-width: 100vw;
     }
 
     .main-header {
-        padding: 3rem 1.5rem 4rem;
+        padding: 3rem 1rem 4rem;
     }
 
     .hero h1 {
-        font-size: 2.5rem;
+        font-size: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    .card {
+        padding: 1.5rem;
+    }
+
+    /* Stack buttons on mobile for better touch targets */
+    .hero-actions {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+
+    .hero-actions .btn {
+        width: 100%;
+        justify-content: center;
     }
 }
 
@@ -681,8 +721,10 @@ footer {
     padding: 1.25rem;
     border-radius: 0.5rem;
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
     margin-bottom: 1.5rem;
     color: #e2e8f0;
+    width: 100%;
 }
 
 .markdown-body pre code {
@@ -847,10 +889,12 @@ footer {
     /* Or slightly different code bg */
     border-radius: 6px;
     padding: 16px;
-    overflow: auto;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
     line-height: 1.45;
     margin-bottom: 16px;
     border: 1px solid var(--border-color);
+    width: 100%;
 }
 
 [data-theme="dark"] .highlight {
@@ -1045,14 +1089,18 @@ footer {
 
 @media (max-width: 768px) {
     .terminal-wrapper {
-        padding: 0 1.5rem;
+        padding: 0 1rem;
+        /* Ensure the wrapper doesn't cause page scroll */
+        max-width: 100vw;
     }
 
     .terminal {
-        font-size: 0.8rem;
-        padding: 1rem;
+        font-size: 0.75rem; /* Smaller font for mobile */
+        padding: 0.75rem;
         min-height: 200px;
-        max-height: 400px;
+        max-height: 60vh; /* Use viewport height unit for better fit */
+        /* Ensure scrollbar doesn't overlap text awkwardly */
+        scrollbar-width: thin; 
     }
 }