fix(web): improve mobile and tablet responsiveness (#237)

- Remove fixed min-width constraints from comparison tables
  - compare.tsx: remove min-w-[860px]
  - alternatives.tsx: remove min-w-[600px]
  - privacy.tsx: remove min-w-[500px]
- Tables now use native overflow-x-auto for horizontal scroll
- Fix subpage navigation overflow on mobile:
  - Show only icons on mobile (no text labels)
  - Add horizontal scroll support
  - Add proper aria-labels for accessibility
  - Add hover states for better touch feedback

Fixes responsive design issues identified during mobile audit.

web/src/app/alternatives/page.tsx

@@ -138,7 +138,7 @@ export default function AlternativesPage() {
 
       <section className="mb-12 rounded-2xl border border-zinc-200 bg-white p-6 overflow-x-auto dark:border-zinc-700 dark:bg-zinc-800">
         <h2 className="mb-6 text-2xl font-bold">Feature Comparison</h2>
-        <table className="w-full min-w-[600px] text-left">
+        <table className="w-full text-left">
           <thead>
             <tr className="border-b border-zinc-200 dark:border-zinc-700">
               <th className="pb-3 text-sm font-semibold">Feature</th>

web/src/app/compare/page.tsx

@@ -99,7 +99,7 @@ export default function CompareEnginesPage() {
       </section>
 
       <section className="overflow-x-auto rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-800">
-        <table className="w-full min-w-[860px] border-collapse text-left">
+        <table className="w-full border-collapse text-left">
           <thead>
             <tr className="border-b border-zinc-200 dark:border-zinc-700">
               <th className="px-4 py-3 text-sm font-semibold">Engine</th>

web/src/app/privacy/page.tsx

@@ -202,7 +202,7 @@ export default function PrivacyPage() {
       <section className="mt-12 rounded-2xl border border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-900/60">
         <h2 className="mb-6 text-2xl font-bold">Vocalinux vs Cloud Dictation Services</h2>
         <div className="overflow-x-auto">
-          <table className="w-full min-w-[500px] text-left">
+          <table className="w-full text-left">
             <thead>
               <tr className="border-b border-zinc-200 dark:border-zinc-700">
                 <th className="pb-3 text-sm font-semibold">Feature</th>

web/src/components/seo-subpage-shell.tsx

@@ -77,17 +77,18 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
           </nav>
         </div>
 
-        <div className="mx-auto flex max-w-6xl gap-2 px-4 pb-4 sm:hidden">
+        <div className="mx-auto flex max-w-6xl gap-2 overflow-x-auto px-4 pb-4 sm:hidden scrollbar-thin">
           {navLinks.map((item) => {
             const Icon = item.icon;
             return (
               <Link
                 key={item.href}
                 href={item.href}
-                className="inline-flex items-center gap-1 rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs font-medium text-muted-foreground dark:border-zinc-700 dark:bg-zinc-800"
+                title={item.label}
+                className="inline-flex items-center justify-center rounded-lg border border-zinc-200 bg-white p-2 text-muted-foreground transition-colors hover:bg-zinc-50 hover:text-foreground dark:border-zinc-700 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+                aria-label={item.label}
               >
-                <Icon className="h-3.5 w-3.5" />
-                {item.label}
+                <Icon className="h-4 w-4" />
               </Link>
             );
           })}