# How Archify Handles Layout Overflow at Different Viewports: A Technical Deep Dive > Discover how Archify tackles layout overflow across viewports. Learn its CSS media query strategy for desktop and mobile scrolling. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: deep-dive - Published: 2026-08-15 --- **Archify prevents unwanted horizontal page scrolling on desktop while enabling controlled overflow scrolling in specific containers on mobile devices through targeted CSS media queries.** Archify's responsive layout system is designed to eliminate accidental horizontal scrollbars on large screens while ensuring that oversized content remains accessible on smaller devices. This is achieved through a carefully orchestrated combination of global overflow constraints and viewport-conditional container rules, as implemented in the `tt-a1i/archify` codebase. ## Global Overflow Prevention on the Body Element Archify starts with a hard rule at the page level: horizontal scrolling is universally disabled on the `` element regardless of viewport size. In [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) at line 40, the global stylesheet applies: ```css body { overflow-x: hidden; } ``` This `overflow-x: hidden` declaration ensures that no matter what happens inside child containers, the entire page will never scroll horizontally. This foundational constraint prevents the jarring user experience of accidental full-page horizontal scroll on desktop browsers. ## The Main Canvas: Responsive Overflow Switching The diagram canvas demonstrates Archify's core overflow strategy—conditional behavior based on viewport width. ### Default Desktop Behavior: Clipped Content In `archify/delta/architecture-delta.mjs` at line 69, the canvas uses: ```css .canvas { overflow: hidden; } ``` This keeps SVG diagrams neatly contained within their bounds on large screens, with any excess content visually clipped rather than scrolled. ### Mobile Behavior: Auto-Enabled Scrolling The same source file contains a media query at line 673 that transforms this behavior for narrow viewports: ```css @media (max-width: 760px) { .canvas { overflow: auto; } } ``` When the viewport drops to 760px or below, the canvas switches to `overflow: auto`, allowing users to scroll both horizontally and vertically within the diagram container to access oversized SVG content. ## Changes List: Horizontal Scroll on Demand The changelog interface follows a similar pattern but with axis-specific scrolling. Also defined at line 673 in `archify/delta/architecture-delta.mjs`, the changes list receives horizontal scrolling capability only in the mobile viewport: ```css @media (max-width: 760px) { .changes { overflow-x: auto; } } ``` This ensures that long change descriptions or metadata rows remain readable without text wrapping, while keeping the desktop interface clean and scrollbar-free. ## Diagram Containers: Always Scrollable Generated diagram wrappers take a more permissive approach. In [`experiments/v3-mermaid-validation/output-C-archify/1.html`](https://github.com/tt-a1i/archify/blob/main/experiments/v3-mermaid-validation/output-C-archify/1.html) at line 29: ```css .diagram-container { overflow-x: auto; } ``` Unlike the canvas and changes list, these containers apply `overflow-x: auto` unconditionally. This allows users to pan horizontally through wide SVG diagrams regardless of viewport size, which is particularly important for architecture diagrams that may exceed typical container widths. ## Responsive Width Constraints The overflow behavior is tightly coupled with width management. The media query at line 673 in `archify/delta/architecture-delta.mjs` also handles container sizing: ```css /* Desktop: constrained width with breathing room */ width: min(1600px, calc(100vw - 64px)); /* Mobile: full-bleed layout */ @media (max-width: 760px) { width: 100%; } ``` By collapsing to `width: 100%` on small screens, Archify ensures that overflow handling is delegated to inner containers rather than the main layout wrapper, creating a predictable scrolling hierarchy. ## Key Architectural Principles Archify's viewport-aware overflow system rests on three design decisions: - **Global containment** — The `body` element's `overflow-x: hidden` acts as a fail-safe against page-level horizontal scroll - **Selective enablement** — `overflow: auto` is applied through media queries only where needed, keeping desktop interfaces pristine - **Container-specific control** — Different content types (canvas, changes, diagrams) receive tailored overflow behavior based on their unique requirements ## Summary - Archify uses `overflow-x: hidden` on the `` element in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) to prevent global horizontal scrolling - The diagram canvas switches from `overflow: hidden` (desktop) to `overflow: auto` (mobile ≤760px) via media query in `archify/delta/architecture-delta.mjs` - Changes lists receive horizontal scrolling (`overflow-x: auto`) only in mobile viewports at the same breakpoint - Generated diagram containers use unconditional `overflow-x: auto` in [`experiments/v3-mermaid-validation/output-C-archify/1.html`](https://github.com/tt-a1i/archify/blob/main/experiments/v3-mermaid-validation/output-C-archify/1.html) for consistent panning behavior - Width constraints collapse from `min(1600px, calc(100vw - 64px))` to `100%` at 760px, triggering the overflow mode transitions ## Frequently Asked Questions ### What viewport width triggers Archify's mobile overflow behavior? The mobile overflow rules activate at **760px or below**, as defined in the single media query `@media (max-width: 760px)` found at line 673 of `archify/delta/architecture-delta.mjs`. This breakpoint simultaneously adjusts container widths and enables scrolling overflow for the canvas and changes list. ### Why does Archify hide overflow globally on the body element? The `overflow-x: hidden` declaration on `` in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) serves as a defensive measure to eliminate accidental full-page horizontal scrollbars. According to the Archify source code, this ensures that even if child elements exceed viewport width, the page itself remains vertically-oriented and stable. ### How does the diagram canvas differ from diagram containers in overflow handling? The **canvas** (`.canvas`) uses conditional overflow—clipped on desktop via `overflow: hidden`, scrollable on mobile via `overflow: auto` inside the media query. **Diagram containers** (`.diagram-container`) use unconditional `overflow-x: auto` regardless of viewport, as wide architecture diagrams require consistent panning capability. ### Can the mobile breakpoint be customized in Archify? The 760px breakpoint is hardcoded in `archify/delta/architecture-delta.mjs` at line 673. To modify this threshold, you would need to adjust the `@media (max-width: 760px)` query and ensure any dependent width calculations remain consistent with the new value.