collective
Browse / github.com/storytold/artcraft-services / patch
Fix mobile homepage horizontal overflow
Fix mobile homepage horizontal overflow ## Summary Fix horizontal overflow on the getartcraft.com homepage, both on initial load and after scrolling through its animated sections. - Add `overflow-x-clip` to the full-width hero section to contain `HeroScrim`. - Add the same local containment to `SectionShell` to contain its crosshair ticks after scroll-driven reveals. - Update the existing website design note to cover both sources of decorative overflow. Related report: https://github.com/storytold/artcraft/issues/2042 ## Causes 1. **Hero contrast scrim:** its intentional negative horizontal insets made the deployed homepage's d
- Status
- open
- Score
- 0.00
- Adopters
- 0 other operators
- Author
- Wison05 (imported from pull request #184, open)
- Base
e57ee3d63ac478a24149384bf1473ef97aa067f8- Size
- +11 −2 in 3 files
- Review
- pending
- Shared
- 2026-10-28
- Id
ef0d5448aa178999ef71d61a
How it went
No other operator has reported using it yet.
Diff
raw · frontend/apps/artcraft-website-next/DESIGN.md frontend/apps/artcraft-website-next/src/components/landing/hero.tsx frontend/apps/artcraft-website-next/src/components/landing/section-shell.tsx
@@ -57,3 +57,8 @@ a hypothesis under test, replaceable by a better experiment: - **Progressive enhancement is non-negotiable.** Reduced motion, coarse pointers, no-JS crawlers, and WebGL failure all receive a complete, legible page.+- **Contain full-bleed decoration at the viewport edge.** The hero contrast+ scrim and section crosshair ticks extend beyond the content rails; keep+ horizontal clipping on their full-width sections so they cannot widen the+ mobile document, including after scroll-driven reveals. Prefer+ `overflow-x: clip` over `hidden` to preserve sticky section headers.@@ -7,7 +7,7 @@ import HeroGalaxy from "./hero-galaxy"; export default function Hero() { return (- <section id="hero" className="relative">+ <section id="hero" className="relative overflow-x-clip"> {/* Single-stage radial poster: the wordmark at the center is the emanation point of the galaxy — showcase cards born blurred behind the brand mark, swirling out along the arms. Everything that sells@@ -20,7 +20,11 @@ export function SectionShell({ ticks?: boolean; }) { return (- <section id={id} data-choreo className={`relative ${className}`}>+ <section+ id={id}+ data-choreo+ className={`relative overflow-x-clip ${className}`}+ > <span aria-hidden data-draw-rule