updating modes and structures

assets/styles/media.css

@@ -1,6 +1,5 @@
 /* =========================================================
    MEDIA.CSS — responsive overrides for the sidebar+tab layout
-   This file replaces the old float-based media queries.
    Load it AFTER style.css.
    ========================================================= */
 
@@ -21,13 +20,11 @@
    CUSTOM SCROLLBARS — themed throughout
    ========================================================= */
 
-/* Firefox */
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--border-mid) transparent;
 }
 
-/* Webkit (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
@@ -47,7 +44,7 @@
 }
 
 /* =========================================================
-   1200px — content column is narrow enough to collapse sidenotes
+   1200px — narrow enough to collapse sidenotes
    ========================================================= */
 
 @media (max-width: 1200px) {
@@ -87,7 +84,7 @@
 }
 
 /* =========================================================
-   900px — auto-hide sidebar (collapses to 0 width)
+   900px — auto-hide sidebar
    ========================================================= */
 
 @media (max-width: 900px) {
@@ -108,7 +105,6 @@
 
 @media (max-width: 768px) {
 
-  /* Allow body to scroll normally */
   html, body {
     overflow: auto;
     height: auto;
@@ -194,7 +190,6 @@
     box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
   }
 
-  /* Dimmed backdrop — clicking it closes the sidebar */
   #sidebar-backdrop {
     display: none;
     position: fixed;
@@ -283,9 +278,47 @@
   }
 
   /* ---- Code blocks ---- */
-  pre.src,
-  .org-src-container > pre {
-    font-size: 0.78rem;
+  /* Shrink font, keep horizontal scroll — never wrap or overflow page */
+  .org-src-container {
+    /* Ensure it never escapes the viewport */
+    max-width: calc(100vw - 2rem);
+  }
+
+  .org-src-container > pre,
+  pre.src {
+    font-size: 0.74rem;
+    padding: 1.4rem 0.7rem 0.75rem;
+    /* Enforce horizontal scroll; absolutely no page-overflow */
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: pre;
+  }
+
+  /* ---- Tables ---- */
+  /* Wrapper-based scroll */
+  .table-wrapper {
+    margin: 0.75rem 0;
+    border-radius: 5px;
+    /* Constrain to viewport */
+    max-width: calc(100vw - 2rem);
+  }
+
+  /* Bare tables (no wrapper) also scroll on mobile */
+  #content table {
+    font-size: 0.8rem;
+    max-width: calc(100vw - 2rem);
+  }
+
+  #content table th,
+  .table-wrapper table th {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.62rem;
+  }
+
+  #content table td,
+  .table-wrapper table td {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.8rem;
   }
 
   /* ---- Tabs ---- */
@@ -314,4 +347,19 @@
     min-width: 60px;
     font-size: 0.65rem;
   }
+
+  .org-src-container {
+    max-width: calc(100vw - 1.5rem);
+  }
+
+  .org-src-container > pre,
+  pre.src {
+    font-size: 0.7rem;
+    padding: 1.3rem 0.6rem 0.6rem;
+  }
+
+  #content table,
+  .table-wrapper {
+    max-width: calc(100vw - 1.5rem);
+  }
 }