Improve mobile UX and add shareable links with inputs

- Increase mobile input touch targets (larger padding and spin controls)
- Add "Copy Link" to ShareResults with input params encoded in URL
- Make recently used section horizontal scrollable ticker on mobile
- Disable adblock popup until AdSense is approved

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: kitfunso

src/components/common/AdBlockDetector.astro

@@ -58,8 +58,9 @@
 </div>
 
 <script is:inline>
+  // DISABLED: Re-enable when AdSense is approved
   // Only run in production
-  if (window.location.hostname !== 'localhost') {
+  if (false && window.location.hostname !== 'localhost') {
     // Check if user dismissed the notice recently (within 7 days)
     const dismissed = localStorage.getItem('adblock-notice-dismissed');
     const dismissedTime = dismissed ? parseInt(dismissed, 10) : 0;

src/components/ui/ShareResults.tsx

@@ -11,14 +11,18 @@ interface ShareResultsProps {
   result: string;
   calculatorName: string;
   className?: string;
+  /** Optional inputs to encode in the shareable URL */
+  inputs?: Record<string, string | number | boolean>;
 }
 
 export default function ShareResults({
   result,
   calculatorName,
   className = '',
+  inputs,
 }: ShareResultsProps) {
   const [copied, setCopied] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -54,7 +58,21 @@ export default function ShareResults({
     };
   }, [isOpen]);
 
-  const shareUrl = typeof window !== 'undefined' ? window.location.href : '';
+  // Build URL with input parameters for sharing
+  const buildShareUrl = () => {
+    if (typeof window === 'undefined') return '';
+    const url = new URL(window.location.href.split('?')[0]);
+    if (inputs) {
+      Object.entries(inputs).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          url.searchParams.set(key, String(value));
+        }
+      });
+    }
+    return url.toString();
+  };
+
+  const shareUrl = buildShareUrl();
   const shareText = `${result} - Calculated with ${calculatorName} on Boring Math`;
 
   const shareLinks = {
@@ -64,6 +82,16 @@ export default function ShareResults({
     linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
   };
 
+  const copyLinkToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy link:', err);
+    }
+  };
+
   const copyToClipboard = async () => {
     try {
       await navigator.clipboard.writeText(`${shareText}\n${shareUrl}`);
@@ -157,7 +185,39 @@ export default function ShareResults({
 
             <div className="border-t border-white/10 my-1"></div>
 
-            {/* Copy Link */}
+            {/* Copy Link with inputs */}
+            <button
+              role="menuitem"
+              onClick={copyLinkToClipboard}
+              className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 text-[var(--color-subtle)] hover:text-[var(--color-cream)] transition-colors text-sm w-full text-left"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                {linkCopied ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                  />
+                )}
+              </svg>
+              <span>{linkCopied ? 'Link Copied!' : 'Copy Link'}</span>
+            </button>
+
+            {/* Copy Result text */}
             <button
               role="menuitem"
               onClick={copyToClipboard}

src/components/ui/primitives/Input.tsx

@@ -16,9 +16,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 
 const SIZE_CLASSES = {
-  sm: 'py-2 text-base',
-  md: 'py-3 text-lg',
-  lg: 'py-4 text-xl',
+  sm: 'py-2.5 md:py-2 text-base',
+  md: 'py-4 md:py-3 text-lg',
+  lg: 'py-5 md:py-4 text-xl',
 };
 
 /**

src/pages/index.astro

@@ -1188,7 +1188,8 @@ const categoryColors: Record<string, string> = {
             Clear
           </button>
         </div>
-        <div id="recently-used-grid" class="flex flex-wrap gap-2">
+        <!-- Mobile: horizontal scrolling ticker, Desktop: wrapped grid -->
+        <div id="recently-used-grid" class="flex gap-2 overflow-x-auto pb-2 -mx-6 px-6 md:mx-0 md:px-0 md:flex-wrap md:overflow-visible scrollbar-hide snap-x snap-mandatory md:snap-none">
           <!-- Populated by JavaScript -->
         </div>
       </div>
@@ -1648,7 +1649,7 @@ const categoryColors: Record<string, string> = {
         const displayTitle = data.title.replace(/\s*Calculator$/i, '');
 
         return `
-          <a href="${item.href}" class="recent-card glass rounded-lg px-3 py-2 flex items-center gap-2 hover:bg-white/10 transition-all group">
+          <a href="${item.href}" class="recent-card glass rounded-lg px-3 py-2 flex items-center gap-2 hover:bg-white/10 transition-all group flex-shrink-0 snap-start whitespace-nowrap">
             <div class="w-6 h-6 rounded-md bg-gradient-to-br ${gradient} flex items-center justify-center flex-shrink-0">
               <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="${data.icon}" />

src/styles/global.css

@@ -382,11 +382,17 @@ input[type='number'] {
   bottom: 2px;
   display: flex;
   flex-direction: column;
-  width: 28px;
+  width: 40px; /* Larger touch target on mobile */
   border-radius: 0 8px 8px 0; /* 10px input radius minus 2px inset */
   overflow: hidden;
 }
 
+@media (min-width: 768px) {
+  .spin-controls {
+    width: 28px;
+  }
+}
+
 .spin-controls button {
   flex: 1;
   display: flex;
@@ -425,9 +431,17 @@ input[type='number'] {
 }
 
 .spin-controls svg {
-  width: 14px;
-  height: 14px;
-  stroke-width: 3;
+  width: 18px;
+  height: 18px;
+  stroke-width: 2.5;
+}
+
+@media (min-width: 768px) {
+  .spin-controls svg {
+    width: 14px;
+    height: 14px;
+    stroke-width: 3;
+  }
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════