update: mobile style

Author: CharlieLeee

_sass/_base.scss

@@ -3,6 +3,10 @@
  ******************************************************************************/
 @use "variables" as v;
 
+html, body {
+  overflow-x: hidden;
+}
+
 body {
   font-family: v.$font-family-base;
   font-size: 18px;

_sass/_distill.scss

@@ -101,6 +101,17 @@ d-article {
   }
 }
 
+d-bibliography {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+
+  ol, ul, li, span {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+}
+
 d-appendix {
   border-top-color: var(--global-divider-color) !important;
   color: var(--global-distill-app-color) !important;
@@ -229,3 +240,43 @@ d-appendix {
 @media (max-width: 1400px) {
   .toc-sidebar { display: none; }
 }
+
+/*******************************************************************************
+ * Mobile responsive overrides
+ ******************************************************************************/
+@media (max-width: 768px) {
+  // Prevent l-page / l-screen figures from overflowing viewport
+  d-article figure.l-page,
+  d-article figure.l-screen,
+  d-article .l-page,
+  d-article .l-screen {
+    width: 100% !important;
+    max-width: 100vw !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    grid-column: text !important;
+  }
+
+  // Tables: horizontal scroll instead of overflow
+  d-article table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // Video grid: single column on mobile
+  .video-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  // Image grids: single column on narrow screens
+  .image-grid-2,
+  .image-grid-3 {
+    grid-template-columns: 1fr !important;
+  }
+
+  // Navbar controls: tighter spacing
+  .nav-controls {
+    gap: 6px;
+  }
+}

_sass/_layout.scss

@@ -11,7 +11,7 @@
 .navbar {
   background-color: var(--global-bg-color);
   border-bottom: 1px solid var(--global-divider-color);
-  padding: 0.5rem 0;
+  padding: 0.5rem 1rem;
 
   .navbar-brand {
     color: var(--global-text-color);