From c52edd632e91623f74babaeafa4e3e97c5d12256 Mon Sep 17 00:00:00 2001
From: dame <contact@dame.is>
Date: Thu, 18 Jun 2026 08:15:59 -0400
Subject: [PATCH] Tighten universal-link pages on mobile and compact scroll
 indicator (#35)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The universal-link pages (profile / post / record + the waypoint picker)
were sized for desktop, so on phones they felt zoomed in relative to the
rest of the app — wide 2rem gutters, a 2.5rem 'choose where to view'
heading, a 200px profile banner, and roomy waypoint rows.

Scope a .waypoint-page class to those three pages and, under 600px, trim
the gutters, scale the picker header and waypoint rows down a notch, and
shrink the profile banner to 130px so more fits without pinch-zooming.

Also reformat the floating scroll-to-choose-path indicator from a tall
stacked column into a compact single row (smaller leaves, less padding),
roughly halving its vertical footprint.


Claude-Session: https://claude.ai/code/session_018cPfrefDV8wbv89Sefo5fD

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/app/[handle]/[collection]/[rkey]/page.tsx |  6 +--
 src/app/[handle]/page.tsx                     |  6 +--
 src/app/globals.css                           | 48 +++++++++++++++++++
 src/app/profile/[handle]/post/[rkey]/page.tsx |  6 +--
 src/components/ProfilePreview.tsx             |  6 +--
 src/components/ScrollIndicator.tsx            | 19 ++++----
 6 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/app/[handle]/[collection]/[rkey]/page.tsx b/src/app/[handle]/[collection]/[rkey]/page.tsx
index cdc53eb..55847a3 100644
--- a/src/app/[handle]/[collection]/[rkey]/page.tsx
+++ b/src/app/[handle]/[collection]/[rkey]/page.tsx
@@ -285,7 +285,7 @@ async function RecordContent({ handle, collection, rkey }: { handle: string; col
       return (
         <>
           <Header compact />
-          <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+          <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
             <NotFoundPanel
               eyebrow="Couldn't resolve"
               headline="That handle didn't resolve."
@@ -365,7 +365,7 @@ async function RecordContent({ handle, collection, rkey }: { handle: string; col
     return (
       <>
         <Header compact />
-        <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+        <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
 
         {/* AT-URI alternate link, mirroring Bluesky's bskyweb template.
             React 19 hoists this to <head>. */}
@@ -512,7 +512,7 @@ export default async function RecordPage({ params }: Props) {
       fallback={
         <>
           <Header compact />
-          <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+          <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
             <PostPreviewSkeleton />
           </div>
         </>
diff --git a/src/app/[handle]/page.tsx b/src/app/[handle]/page.tsx
index 1917efb..decb457 100644
--- a/src/app/[handle]/page.tsx
+++ b/src/app/[handle]/page.tsx
@@ -89,7 +89,7 @@ async function ProfileContent({ handle }: { handle: string }) {
     return (
       <>
         <Header compact />
-        <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+        <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
           <NotFoundPanel
             eyebrow="Couldn't resolve"
             headline="That handle didn't resolve."
@@ -110,7 +110,7 @@ async function ProfileContent({ handle }: { handle: string }) {
   return (
     <>
       <Header compact />
-      <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+      <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
         {profileData && (
           <div className="content-fade-in">
             <ProfilePreview profile={profileData} />
@@ -154,7 +154,7 @@ export default async function ProfilePage({ params }: Props) {
       fallback={
         <>
           <Header compact />
-          <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+          <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
             <ProfilePreviewSkeleton />
           </div>
         </>
diff --git a/src/app/globals.css b/src/app/globals.css
index 7839684..2258d0c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2923,3 +2923,51 @@ html {
     text-align: center;
   }
 }
+
+.profile-preview-banner {
+  width: 100%;
+  height: 200px;
+}
+
+/* Universal-link (waypoint) pages ran large on phones — the preview card,
+   the "choose where to view" header, and the waypoint rows were all sized
+   for desktop, so the page felt zoomed in versus the rest of the app. On
+   small screens tighten the gutters and scale the big elements down a notch
+   so more fits on screen without the user having to pinch-zoom out. */
+@media (max-width: 600px) {
+  .waypoint-page {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .waypoint-page #waypoint-picker > header {
+    margin-bottom: 1.5rem;
+  }
+
+  .waypoint-page #waypoint-picker > header h1 {
+    font-size: 1.875rem;
+  }
+
+  .waypoint-page #waypoint-picker > header p {
+    font-size: 1rem !important;
+  }
+
+  .waypoint-page .waypoint-button {
+    padding: 1rem 1.125rem;
+    gap: 0.75rem;
+  }
+
+  .waypoint-page .waypoint-name {
+    font-size: 1rem;
+  }
+
+  .waypoint-page .waypoint-description {
+    font-size: 0.8125rem;
+  }
+
+  /* Trim the profile banner — at 200px it ate roughly a third of the
+     viewport before any content showed. */
+  .profile-preview-banner {
+    height: 130px;
+  }
+}
diff --git a/src/app/profile/[handle]/post/[rkey]/page.tsx b/src/app/profile/[handle]/post/[rkey]/page.tsx
index 727f920..07ee868 100644
--- a/src/app/profile/[handle]/post/[rkey]/page.tsx
+++ b/src/app/profile/[handle]/post/[rkey]/page.tsx
@@ -171,7 +171,7 @@ async function PostContent({ handle, rkey }: { handle: string; rkey: string }) {
       return (
         <>
           <Header compact />
-          <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+          <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
             <NotFoundPanel
               eyebrow="Couldn't resolve"
               headline="That handle didn't resolve."
@@ -235,7 +235,7 @@ async function PostContent({ handle, rkey }: { handle: string; rkey: string }) {
     return (
       <>
         <Header compact />
-        <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+        <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
 
         {/* AT-URI alternate link, mirroring Bluesky's bskyweb template.
             React 19 hoists this to <head>. */}
@@ -309,7 +309,7 @@ export default async function PostPage({ params }: Props) {
       fallback={
         <>
           <Header compact />
-          <div className="container-narrow" style={{ padding: '0 2rem 4rem' }}>
+          <div className="container-narrow waypoint-page" style={{ padding: '0 2rem 4rem' }}>
             <PostPreviewSkeleton />
           </div>
         </>
diff --git a/src/components/ProfilePreview.tsx b/src/components/ProfilePreview.tsx
index f55cb4e..79c145a 100644
--- a/src/components/ProfilePreview.tsx
+++ b/src/components/ProfilePreview.tsx
@@ -74,18 +74,16 @@ export default function ProfilePreview({ profile }: ProfilePreviewProps) {
       {/* Banner */}
       {banner ? (
         <div
+          className="profile-preview-banner"
           style={{
-            width: '100%',
-            height: '200px',
             background: `url(${sanitizeUrl(banner)}) center/cover`,
             backgroundColor: 'var(--bg-tertiary)',
           }}
         />
       ) : (
         <div
+          className="profile-preview-banner"
           style={{
-            width: '100%',
-            height: '200px',
             background: 'linear-gradient(135deg, var(--accent-moss) 0%, var(--accent-forest) 100%)',
           }}
         />
diff --git a/src/components/ScrollIndicator.tsx b/src/components/ScrollIndicator.tsx
index d2b8277..72a5d56 100644
--- a/src/components/ScrollIndicator.tsx
+++ b/src/components/ScrollIndicator.tsx
@@ -55,10 +55,10 @@ export default function ScrollIndicator({
         className="scroll-indicator-floating"
         style={{
           display: 'flex',
-          flexDirection: 'column',
+          flexDirection: 'row',
           alignItems: 'center',
-          gap: '0.5rem',
-          padding: '1rem 1.75rem 1.25rem',
+          gap: '0.625rem',
+          padding: '0.5rem 1rem 0.5rem 0.875rem',
           background: 'var(--bg-overlay)',
           backdropFilter: 'blur(12px)',
           WebkitBackdropFilter: 'blur(12px)',
@@ -104,8 +104,9 @@ export default function ScrollIndicator({
         <div
           style={{
             position: 'relative',
-            width: '40px',
-            height: '40px',
+            width: '24px',
+            height: '24px',
+            flexShrink: 0,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -118,7 +119,7 @@ export default function ScrollIndicator({
               animation: 'float-leaf-1 3.5s ease-in-out infinite',
             }}
           >
-            <Leaf size={28} strokeWidth={1.5} />
+            <Leaf size={18} strokeWidth={1.5} />
           </div>
 
           <div
@@ -127,7 +128,7 @@ export default function ScrollIndicator({
               animation: 'float-leaf-2 3.5s ease-in-out 1.2s infinite',
             }}
           >
-            <Leaf size={22} strokeWidth={1.5} />
+            <Leaf size={14} strokeWidth={1.5} />
           </div>
 
           <div
@@ -136,7 +137,7 @@ export default function ScrollIndicator({
               animation: 'float-leaf-3 3.5s ease-in-out 2.4s infinite',
             }}
           >
-            <Leaf size={24} strokeWidth={1.5} />
+            <Leaf size={16} strokeWidth={1.5} />
           </div>
         </div>
 
@@ -247,7 +248,7 @@ export default function ScrollIndicator({
 
         @media (max-width: 640px) {
           .scroll-indicator-floating {
-            padding: 0.875rem 1.5rem 1rem;
+            padding: 0.4375rem 0.875rem 0.4375rem 0.75rem;
           }
         }
       `}</style>
-- 
2.51.2