From be66bdad1859455ff8d2a3632b637ac5a7b015bf Mon Sep 17 00:00:00 2001
From: Jatin K Malik <jatinkrmalik@gmail.com>
Date: Thu, 19 Feb 2026 01:22:47 -0800
Subject: [PATCH] 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        | 2 +-
 web/src/app/compare/page.tsx             | 2 +-
 web/src/app/privacy/page.tsx             | 2 +-
 web/src/components/seo-subpage-shell.tsx | 9 +++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/app/alternatives/page.tsx b/web/src/app/alternatives/page.tsx
index 5447202..12651de 100644
--- a/web/src/app/alternatives/page.tsx
+++ b/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>
diff --git a/web/src/app/compare/page.tsx b/web/src/app/compare/page.tsx
index 662070e..98aa054 100644
--- a/web/src/app/compare/page.tsx
+++ b/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>
diff --git a/web/src/app/privacy/page.tsx b/web/src/app/privacy/page.tsx
index 7cc4bee..0f5c6ea 100644
--- a/web/src/app/privacy/page.tsx
+++ b/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>
diff --git a/web/src/components/seo-subpage-shell.tsx b/web/src/components/seo-subpage-shell.tsx
index f459fec..703b885 100644
--- a/web/src/components/seo-subpage-shell.tsx
+++ b/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>
             );
           })}