landing page: simplify scroll and minor prose tweaks

Author: geraldarthurdavis

uapi/app/(root)/components/MarketingLandingPage.tsx

@@ -386,8 +386,8 @@ const ComingSoonMicroPost = memo(function ComingSoonMicroPost() {
         <span className={heroHighlightClass}>$ENGI</span>
         <span>&apos;s purpose is to hoard valuable technical information and compensate contributors
         fairly. Provable knowledge measuring algorithms build the foundations for collection and
-        issuance. Ideal long-term partners for asset management, infrastructure, and legal will be
-        finalized to empower the safe and secure future of a thriving </span>
+        issuance. Ideal long-term partnerships for asset management and infrastructure will be
+        finalized to empower the secure and thriving future of </span>
         <span className={heroHighlightClass}>$ENGI</span>
         <span>.</span>
       </p>
@@ -397,24 +397,10 @@ const ComingSoonMicroPost = memo(function ComingSoonMicroPost() {
 
 export default function MarketingLandingPage() {
   const containerRef = useRef<HTMLDivElement>(null);
-  const stageRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const html = document.documentElement;
-    const body = document.body;
-    html.classList.add('soft-launch');
-    body.classList.add('soft-launch');
-
-    return () => {
-      html.classList.remove('soft-launch');
-      body.classList.remove('soft-launch');
-    };
-  }, []);
 
   useEffect(() => {
     const container = containerRef.current;
-    const stage = stageRef.current;
-    if (!container || !stage) {
+    if (!container) {
       return;
     }
 
@@ -443,9 +429,9 @@ export default function MarketingLandingPage() {
 
     const handlePointerMove = (event: PointerEvent) => {
       const rect = container.getBoundingClientRect();
-      const stageHeight = stage.offsetHeight || container.scrollHeight || rect.height;
+      const stageHeight = container.offsetHeight || container.scrollHeight || rect.height;
       nextX = ((event.clientX - rect.left) / rect.width) * 100;
-      nextY = ((event.clientY - rect.top + container.scrollTop) / stageHeight) * 100;
+      nextY = ((event.clientY - rect.top) / stageHeight) * 100;
       scheduleCommit();
     };
 
@@ -467,39 +453,6 @@ export default function MarketingLandingPage() {
     };
   }, []);
 
-  useEffect(() => {
-    const container = containerRef.current;
-    const stage = stageRef.current;
-    if (!container || !stage) {
-      return;
-    }
-
-    const updateStageHeight = () => {
-      const stageHeight = Math.max(
-        container.scrollHeight,
-        container.clientHeight,
-        stage.scrollHeight,
-        stage.offsetHeight,
-      );
-      container.style.setProperty('--stage-height-px', `${stageHeight}px`);
-    };
-
-    updateStageHeight();
-
-    const resizeObserver = new ResizeObserver(() => {
-      updateStageHeight();
-    });
-
-    resizeObserver.observe(container);
-    resizeObserver.observe(stage);
-    window.addEventListener('resize', updateStageHeight);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener('resize', updateStageHeight);
-    };
-  }, []);
-
   return (
     <>
       <svg width="0" height="0" style={{ position: 'absolute', top: '-9999px' }}>
@@ -518,21 +471,14 @@ export default function MarketingLandingPage() {
 
       <div
         ref={containerRef}
-        className="coming-soon-container relative flex w-full flex-col overflow-x-hidden overflow-y-auto bg-[#030816] text-white"
+        className="coming-soon-container relative flex w-full flex-col bg-[#030816] text-white"
         style={{
-          height: '100svh',
           minHeight: '100svh',
-          overscrollBehaviorY: 'contain',
-          '--stage-height-px': '100svh',
           '--mouse-x': '50%',
           '--mouse-y': '50%',
         } as React.CSSProperties}
       >
-        <div
-          ref={stageRef}
-          className="relative flex w-full flex-col"
-          style={{ minHeight: 'var(--stage-height-px)' }}
-        >
+        <div className="relative flex min-h-[100svh] w-full flex-col">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(103,254,183,0.14),transparent_34%),linear-gradient(180deg,#07131d_0%,#030816_45%,#02060d_100%)]" />
           <div className="absolute inset-0 opacity-20 [background-image:linear-gradient(rgba(103,254,183,0.09)_1px,transparent_1px),linear-gradient(90deg,rgba(103,254,183,0.09)_1px,transparent_1px)] [background-size:160px_160px]" />
 
@@ -570,9 +516,8 @@ export default function MarketingLandingPage() {
           ))}
 
           <div
-            className="pointer-events-none absolute inset-x-0 top-0 transition-opacity duration-300"
+            className="pointer-events-none absolute inset-0 transition-opacity duration-300"
             style={{
-              height: 'var(--stage-height-px)',
               background:
                 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(103, 254, 183, 0.16) 0%, rgba(103, 254, 183, 0.08) 16%, transparent 44%)',
               willChange: 'background',
@@ -924,11 +869,11 @@ export default function MarketingLandingPage() {
                       <span className="h-2.5 w-2.5 rounded-full bg-emerald-300/70" />
                     </div>
                     <div className="flex flex-wrap items-center justify-end gap-x-2 gap-y-1 text-[11px] uppercase tracking-[0.22em] text-emerald-200/60">
-                      <span>read</span>
+                      <span>write</span>
                       <ArrowRightIcon className="h-3.5 w-3.5 shrink-0 text-emerald-200/42" />
                       <span>measure</span>
                       <ArrowRightIcon className="h-3.5 w-3.5 shrink-0 text-emerald-200/42" />
-                      <span>write</span>
+                      <span>read</span>
                     </div>
                   </div>
 

uapi/app/globals.css

@@ -416,13 +416,6 @@ nextjs-portal {
   --chart-5: 27 87% 67%;
   }
 
-/* Soft-launch mode: lock viewport to prevent scrolling */
-html.soft-launch,
-body.soft-launch {
-  overflow: hidden !important;
-  height: 100vh !important;
-}
-
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;

uapi/styles/coming-soon-fix.css

@@ -1,27 +1,23 @@
 /* Coming Soon Component - Specific Fixes */
 
-/* Ensure the container allows overflow for glow effects but prevents scrollbars */
+/* Use normal document scrolling while keeping horizontal overflow clipped. */
 .coming-soon-container {
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow-x: clip;
+  overflow-y: visible;
   background-color: #030816;
   min-height: 100svh;
   width: 100%;
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
-  -webkit-overflow-scrolling: touch;
 }
 
 /* Create a wrapper to prevent scrollbars while allowing overflow for visual effects */
 .coming-soon-container::before {
   content: "";
   position: absolute;
-  top: -20px;
-  left: -20px;
-  right: -20px;
-  bottom: -20px;
+  inset: 0;
   pointer-events: none;
 }
 

uapi/styles/coming-soon-glow-fix.css

@@ -60,9 +60,10 @@
     overflow: visible !important;
   }
 
-  /* Ensure the coming soon container doesn't clip */
+  /* Keep natural document scrolling on mobile. */
   .coming-soon-container {
-    overflow: visible !important;
+    overflow-x: clip !important;
+    overflow-y: visible !important;
   }
 
   /* Smoother animation for the glow effect with more keyframes for smoother transitions */

uapi/tests/e2e/landing.mobile-scroll.spec.ts

@@ -0,0 +1,50 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Landing page mobile scrolling', () => {
+  test('uses natural document scroll instead of an inner mobile scroll root', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name !== 'phone', 'mobile-only landing regression');
+
+    await page.goto('/');
+
+    const container = page.locator('.coming-soon-container');
+    await expect(container).toBeVisible();
+
+    const beforeScroll = await container.evaluate((element) => {
+      const containerElement = element as HTMLElement;
+
+      return {
+        htmlOverflowY: window.getComputedStyle(document.documentElement).overflowY,
+        bodyOverflowY: window.getComputedStyle(document.body).overflowY,
+        containerOverflowX: window.getComputedStyle(containerElement).overflowX,
+        containerOverflowY: window.getComputedStyle(containerElement).overflowY,
+        windowInnerHeight: window.innerHeight,
+        documentScrollHeight: document.documentElement.scrollHeight,
+      };
+    });
+
+    expect(beforeScroll.htmlOverflowY).not.toBe('hidden');
+    expect(beforeScroll.bodyOverflowY).not.toBe('hidden');
+    expect(beforeScroll.containerOverflowX).toBe('clip');
+    expect(beforeScroll.containerOverflowY).not.toBe('auto');
+    expect(beforeScroll.containerOverflowY).not.toBe('scroll');
+    expect(beforeScroll.documentScrollHeight).toBeGreaterThan(beforeScroll.windowInnerHeight);
+
+    await page.evaluate(() => {
+      window.scrollTo({ top: 480, behavior: 'auto' });
+    });
+
+    const afterScroll = await container.evaluate((element) => {
+      const containerElement = element as HTMLElement;
+
+      return {
+        containerScrollTop: containerElement.scrollTop,
+        windowScrollY: window.scrollY,
+        documentScrollTop: document.documentElement.scrollTop + document.body.scrollTop,
+      };
+    });
+
+    expect(afterScroll.containerScrollTop).toBe(0);
+    expect(afterScroll.windowScrollY).toBeGreaterThan(0);
+    expect(afterScroll.documentScrollTop).toBeGreaterThan(0);
+  });
+});