From e6869c82cc4f64504c93cd4a433c329ae79ca6fb Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Fri, 11 Sep 2026 17:55:30 -0500
Subject: [PATCH] fix(responsive): prevent horizontal overflow on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- styles/globals.css: add overflow-x: hidden + max-width: 100vw to body (global safety net)
- components/CollectionPageView.js: flex-wrap filter row, responsive search width (w-full sm:w-64)
- pages/my-cards.js: replace min-w-[200px] with w-full sm:min-w-[200px] on filter search
- pages/designer.js: remove shrink-0 from live preview sidebar to allow flex collapse
- components/DeckDetailView.js: add flex-wrap + gap to header flex row
- components/CardItem.js: remove whitespace-nowrap from expanding add buttons (3 instances)
- components/DashboardRecentActivity.js: whitespace-nowrap → whitespace-normal on timestamp
- components/CollaboratorFacepile.js: tooltips use whitespace-normal + break-words + max-w
- components/MobileNavigation.js: tooltip whitespace-nowrap → whitespace-normal

Fixes horizontal scroll / layout breakage on mobile (<375px) across the site.
---
 components/CardItem.js                |  6 +++---
 components/CollaboratorFacepile.js    |  4 ++--
 components/CollectionPageView.js      | 10 +++++-----
 components/DashboardRecentActivity.js |  2 +-
 components/DeckDetailView.js          |  2 +-
 components/MobileNavigation.js        |  2 +-
 pages/designer.js                     |  2 +-
 pages/my-cards.js                     |  2 +-
 styles/globals.css                    |  2 ++
 9 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/components/CardItem.js b/components/CardItem.js
index fd0f26a..dd6bb16 100644
--- a/components/CardItem.js
+++ b/components/CardItem.js
@@ -31,7 +31,7 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
         <div className="absolute bottom-full left-0 mb-1 flex flex-col space-y-1">
           <button
             onClick={(e) => handleOptionClick(e, () => onAddToCollection([card]))}
-            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
+            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs"
             style={{ backgroundColor: 'var(--accent-flame)', color: 'white' }}
             title={VOCAB.ADD_TO_LIST}
           >
@@ -43,7 +43,7 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
           
           <button
             onClick={(e) => handleOptionClick(e, () => onAddToDeck([card]))}
-            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
+            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs"
             style={{ backgroundColor: 'var(--accent-gold)', color: 'white' }}
             title="Add to Deck"
           >
@@ -55,7 +55,7 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
           
           <button
             onClick={(e) => handleOptionClick(e, onMarkAsOwned)}
-            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
+            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs"
             style={{ backgroundColor: 'var(--accent-ember)', color: 'white' }}
             title={VOCAB.ADD_TO_MY_COLLECTION}
           >
diff --git a/components/CollaboratorFacepile.js b/components/CollaboratorFacepile.js
index 01e970d..a1ec557 100644
--- a/components/CollaboratorFacepile.js
+++ b/components/CollaboratorFacepile.js
@@ -101,7 +101,7 @@ export default function CollaboratorFacepile({ collectionId, creatorEmail }) {
               
               {/* Tooltip */}
               <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                <div className="bg-gray-900 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
+                <div className="bg-gray-900 text-white text-xs rounded-lg py-2 px-3 whitespace-normal break-words max-w-[12rem]">
                   <div className="font-medium">{user.email}</div>
                   <div className="text-gray-300">{getRoleLabel(user.role)}</div>
                   {/* Arrow */}
@@ -119,7 +119,7 @@ export default function CollaboratorFacepile({ collectionId, creatorEmail }) {
               
               {/* Tooltip for remaining users */}
               <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                <div className="bg-gray-900 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap max-w-48">
+                <div className="bg-gray-900 text-white text-xs rounded-lg py-2 px-3 whitespace-normal break-words max-w-[12rem] max-w-48">
                   <div className="font-medium mb-1">{remainingCount} more collaborator{remainingCount > 1 ? 's' : ''}</div>
                   {allUsers.slice(4).map((user, index) => (
                     <div key={user.email || index} className="text-gray-300">
diff --git a/components/CollectionPageView.js b/components/CollectionPageView.js
index 98ae6e7..1e6f49e 100644
--- a/components/CollectionPageView.js
+++ b/components/CollectionPageView.js
@@ -183,7 +183,7 @@ export default function CollectionPageView(props) {
             </p>
             
             {/* TCG Tags */}
-            <div className="flex items-center space-x-2 mb-4">
+            <div className="flex flex-wrap items-center gap-2 mb-4">
               {Object.entries(gameStats).map(([game, count]) =>
                 count > 0 ? (
                   <span
@@ -287,9 +287,9 @@ export default function CollectionPageView(props) {
         {/* Content */}
         <div className="p-6">
           {/* Search and Filters */}
-          <div className="flex items-center justify-between mb-6">
-            <div className="flex items-center space-x-4">
-              <div className="w-64">
+          <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+            <div className="flex flex-wrap items-center gap-3 w-full sm:w-auto">
+              <div className="w-full sm:w-64">
                 <SearchBar
                   value={searchCards}
                   onChange={(e) => {
@@ -307,7 +307,7 @@ export default function CollectionPageView(props) {
               <select
                 value={selectedRarity}
                 onChange={(e) => setSelectedRarity(e.target.value)}
-                className="input-field"
+                className="input-field w-full sm:w-auto"
               >
                 <option>All Rarities</option>
                 <option>Common</option>
diff --git a/components/DashboardRecentActivity.js b/components/DashboardRecentActivity.js
index 2c34621..24ebe7a 100644
--- a/components/DashboardRecentActivity.js
+++ b/components/DashboardRecentActivity.js
@@ -88,7 +88,7 @@ export default function DashboardRecentActivity({ activities = [], loading = fal
                 </div>
               </div>
               <span
-                className="text-xs whitespace-nowrap flex-shrink-0"
+                className="text-xs whitespace-normal flex-shrink-0"
                 style={{ color: 'var(--text-secondary)' }}
               >
                 {row.time}
diff --git a/components/DeckDetailView.js b/components/DeckDetailView.js
index d3897aa..d71c13f 100644
--- a/components/DeckDetailView.js
+++ b/components/DeckDetailView.js
@@ -14,7 +14,7 @@ export default function DeckDetailView({
 }) {
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <div className="flex justify-between items-start mb-8">
+      <div className="flex flex-wrap justify-between items-start mb-8 gap-3">
         <div>
           <div className="flex items-center space-x-3 mb-2">
             <Link
diff --git a/components/MobileNavigation.js b/components/MobileNavigation.js
index 61611da..54a3872 100644
--- a/components/MobileNavigation.js
+++ b/components/MobileNavigation.js
@@ -130,7 +130,7 @@ export default function MobileNavigation({ onMenuOpen }) {
                       {getIcon(item.icon, item.active, true)}
                     </button>
                     <span
-                      className="absolute top-12 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap"
+                      className="absolute top-12 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-normal"
                       style={{
                         color: item.active
                           ? 'var(--accent-ember)'
diff --git a/pages/designer.js b/pages/designer.js
index 9f5093a..97b815a 100644
--- a/pages/designer.js
+++ b/pages/designer.js
@@ -898,7 +898,7 @@ export default function Designer() {
                 </div>
               )}
                     </div>
-                    <div className="w-full max-w-[240px] shrink-0">
+                    <div className="w-full max-w-[240px]">
                       <p className="text-xs mb-2 text-center" style={{ color: 'var(--text-secondary)' }}>
                         Live frame preview
                       </p>
diff --git a/pages/my-cards.js b/pages/my-cards.js
index cefcdde..07d25bb 100644
--- a/pages/my-cards.js
+++ b/pages/my-cards.js
@@ -352,7 +352,7 @@ export default function MyCards() {
       <div>
         <div className="glass-panel rounded-2xl p-4 mb-6">
           <div className="flex flex-wrap gap-4">
-            <div className="flex-1 min-w-[200px]">
+            <div className="flex-1 w-full sm:min-w-[200px]">
               <SearchBar
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
diff --git a/styles/globals.css b/styles/globals.css
index 8828d13..e2ade73 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,6 +10,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: background-color 0.3s ease, color 0.3s ease;
+  overflow-x: hidden;
+  max-width: 100vw;
 }
 
 /* Theme Variables - Deck Hearth Fire-Inspired */