Mobile: cap container to viewport so wide JSON/table scroll internally; width-driven overlay; fix ribbon dot wrap

reading_room_ui.py

@@ -313,26 +313,36 @@ table.rr-table td.dim {{ color: var(--rr-muted); }}
 footer {{ opacity: 0.55; }}
 .rr-panel .block {{ background: transparent !important; }}
 
-/* ---- mobile (<=700px): stack the two columns and let the custom flex rows
-   wrap, so a phone never overflows horizontally. Scoped entirely to this media
+/* ---- mobile (<=700px): stack the two columns and keep every panel within the
+   viewport, so a phone never scrolls horizontally. Scoped entirely to this media
    query, so the desktop and tablet layout above is untouched. The custom header,
-   ribbon, and footer are non-wrapping flex rows whose nowrap children would
-   otherwise pin the container wider than the viewport and defeat column
-   stacking; here they wrap and their nowrap text relaxes. The evidence column
-   (rr-col) is forced to a full-width flex line with no min-width floor so the
-   left and right columns stack instead of sitting side by side. ---- */
+   footer, and card-heads are non-wrapping flex rows whose nowrap children would
+   otherwise pin the container wider than the viewport and defeat column stacking;
+   here they wrap and their nowrap text relaxes, and the two evidence columns are
+   forced onto full-width flex lines with no min-width floor so they stack.
+   Critically, the container is capped at the viewport width and clips horizontal
+   overflow, so a child with a wide intrinsic size - the raw-JSON code editor's
+   long lines or a wide findings table - scrolls inside its own box instead of
+   expanding the whole page out past the screen. The evidence image is made
+   width-driven (height auto) so it fills the column rather than forcing its tall
+   fixed-height aspect width. The ribbon is deliberately NOT wrapped: its dot and
+   text share one flex line, so wrapping it would strand the dot alone on a line
+   above the text. ---- */
 @media (max-width: 700px) {{
+  .gradio-container {{ max-width: 100vw !important; overflow-x: hidden !important; }}
   #rr-header {{ flex-wrap: wrap; }}
   #rr-header h1 {{ white-space: normal; }}
   #rr-header .chip {{ white-space: normal; }}
   #rr-header .spacer {{ flex-basis: 100%; }}
-  #rr-ribbon {{ flex-wrap: wrap; }}
   #rr-footer {{ flex-wrap: wrap; }}
   #rr-footer .spacer {{ flex-basis: 100%; }}
   .rr-head {{ flex-wrap: wrap; }}
   .rr-head .title {{ white-space: normal; }}
   .rr-row {{ flex-wrap: wrap !important; }}
   .rr-col {{ flex: 1 1 100% !important; min-width: 0 !important; }}
+  #overlay-out {{ height: auto !important; min-height: 220px !important; }}
+  .rr-tablewrap {{ overflow-x: auto !important; }}
+  #json-out .cm-scroller {{ overflow-x: auto !important; }}
 }}
 """