ux(mobile): reduce footer height and improve copy

Made-with: Cursor

Author: dotsystemsdevs

src/app/globals.css

@@ -543,7 +543,10 @@ a.subpage-inline-mail {
 @media (max-width: 640px) {
   /* Page padding */
   main { padding-left: 16px !important; padding-right: 16px !important; }
-  .page-shell-main { padding-top: calc(env(safe-area-inset-top) + 28px); }
+  .page-shell-main {
+    min-height: 100svh;
+    padding-top: calc(env(safe-area-inset-top) + 36px) !important;
+  }
 
   /* Certificate wrapper spacing only; scale is handled in CertificateCard.tsx */
   .certificate-scroll-zone {
@@ -570,11 +573,22 @@ a.subpage-inline-mail {
   }
 
   /* Hero: keep CTA above the fold on small screens */
-  .page-hero { padding-top: 6px; padding-bottom: 8px; }
+  .page-hero { padding-top: 14px; padding-bottom: 10px; }
   .page-hero-emoji { font-size: clamp(48px, 13vw, 62px); margin-bottom: 6px; }
   .page-hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); margin: 4px 0 8px; }
   .page-hero-sub { font-size: 13px; }
-  .page-shell-main { min-height: 100svh; padding-top: calc(env(safe-area-inset-top) + 20px) !important; }
+
+  /* Hall of Fame marquee: less clipped on phones */
+  .recent-marquee {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+    height: 284px !important;
+    -webkit-mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent) !important;
+    mask-image: linear-gradient(to right, transparent, black 18px, black calc(100% - 18px), transparent) !important;
+  }
+  .recent-card {
+    height: 230px !important;
+  }
 
   .input-button-wrapper {
     flex-direction: column;
@@ -613,7 +627,8 @@ a.subpage-inline-mail {
   }
 
   /* Footer: keep links low-noise but tappable */
-  footer a { font-size: 13px !important; padding: 8px 0 !important; min-height: 44px !important; }
+  .site-footer { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 2px; }
+  footer a { font-size: 12px !important; padding: 6px 0 !important; min-height: 36px !important; }
 
   .mode-tab {
     text-align: center;

src/components/ReadmeBadge.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import { copyText, promptCopy } from '@/lib/clipboard'
 
 const MONO = `var(--font-courier), system-ui, sans-serif`
 
@@ -18,11 +19,11 @@ export default function ReadmeBadge({ username }: Props) {
   const altText    = `Commitment Issues — @${username}'s graveyard`
   const markdown   = `[![${altText}](${badgeUrl})](${profileUrl})`
 
-  function handleCopy() {
-    navigator.clipboard.writeText(markdown).then(() => {
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    })
+  async function handleCopy() {
+    const ok = await copyText(markdown)
+    if (!ok) promptCopy(markdown, 'Copy this README badge markdown')
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
   }
 
   return (

src/lib/clipboard.ts

@@ -0,0 +1,51 @@
+export async function copyText(text: string): Promise<boolean> {
+  if (!text) return false
+
+  // Modern API (works on HTTPS + user gesture; can fail on iOS/Safari)
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch {
+    // fall back below
+  }
+
+  // Fallback: textarea + execCommand('copy')
+  try {
+    if (typeof document === 'undefined') return false
+
+    const ta = document.createElement('textarea')
+    ta.value = text
+    ta.setAttribute('readonly', 'true')
+    ta.style.position = 'fixed'
+    ta.style.top = '0'
+    ta.style.left = '0'
+    ta.style.width = '1px'
+    ta.style.height = '1px'
+    ta.style.opacity = '0'
+    ta.style.pointerEvents = 'none'
+    ta.style.zIndex = '-1'
+    document.body.appendChild(ta)
+
+    ta.focus()
+    ta.select()
+    ta.setSelectionRange(0, ta.value.length)
+
+    const ok = document.execCommand('copy')
+    document.body.removeChild(ta)
+    return ok
+  } catch {
+    return false
+  }
+}
+
+export function promptCopy(text: string, label = 'Copy this'): void {
+  try {
+    // Works as a last resort on mobile/desktop.
+    window.prompt(label, text)
+  } catch {
+    // ignore
+  }
+}
+