diff --git a/nextjs-app/components/ComparisonView.module.css b/nextjs-app/components/ComparisonView.module.css index b820ad3..3629942 100644 --- a/nextjs-app/components/ComparisonView.module.css +++ b/nextjs-app/components/ComparisonView.module.css @@ -306,6 +306,15 @@ -webkit-overflow-scrolling: touch; } +/* Right-edge fade so phone users see the comparison table scrolls. + Otherwise the wider-than-viewport table silently clips. */ +@media (max-width: 640px) { + .tableWrapper { + -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); + mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); + } +} + .comparisonTable { width: 100%; border-collapse: separate; diff --git a/nextjs-app/components/ComparisonView.tsx b/nextjs-app/components/ComparisonView.tsx index abacf69..f97e679 100644 --- a/nextjs-app/components/ComparisonView.tsx +++ b/nextjs-app/components/ComparisonView.tsx @@ -157,8 +157,29 @@ export function ComparisonView({ }; const handleShare = async () => { + const url = window.location.href; + const count = selectedSchools.length; + const shareData = { + title: 'School comparison · SchoolCompare', + text: count > 0 + ? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare` + : 'SchoolCompare', + url, + }; + // Prefer the native share sheet on platforms that support it (iOS / Android). + // canShare is feature-detected because Safari iOS exposes share() but + // some configurations refuse the payload. + if (typeof navigator !== 'undefined' && navigator.share && (!navigator.canShare || navigator.canShare(shareData))) { + try { + await navigator.share(shareData); + return; + } catch (err) { + // User cancelled — bail silently. Any other error falls through to clipboard. + if ((err as DOMException)?.name === 'AbortError') return; + } + } try { - await navigator.clipboard.writeText(window.location.href); + await navigator.clipboard.writeText(url); setShareConfirm(true); setTimeout(() => setShareConfirm(false), 2000); } catch { /* fallback: do nothing */ }