From 3d4bdcf7f2910071abff211685af44dbefb055e9 Mon Sep 17 00:00:00 2001
From: the-ghost-bot <contact.ghost01@gmail.com>
Date: Thu, 21 Nov 2024 19:57:25 +0100
Subject: [PATCH] fix: improve mobile responsiveness and UI consistency

- Enhance table layout for small screens
- Fix tab navigation counts
- Improve text wrapping and spacing
- Optimize settings modal for mobile
- Add responsive gallery grid
- Fix DOM nesting issues
---
 src/components/ContentTable.tsx      | 105 +++++++++++++++------------
 src/components/GameDetails.tsx       |  23 +++---
 src/components/ScreenshotGallery.tsx |   4 +-
 src/components/Settings.tsx          |  23 +++---
 4 files changed, 80 insertions(+), 75 deletions(-)

diff --git a/src/components/ContentTable.tsx b/src/components/ContentTable.tsx
index 74a4e9f..87780fe 100644
--- a/src/components/ContentTable.tsx
+++ b/src/components/ContentTable.tsx
@@ -37,7 +37,7 @@ export function ContentTable({
     const { updates, dlcs } = getRelatedContent(allItems, baseId);
     
     return (
-      <div className="flex gap-2">
+      <div className="flex flex-wrap gap-2">
         {updates.length > 0 && (
           <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-500/10 text-blue-500">
             {updates.length} Update{updates.length !== 1 ? 's' : ''}
@@ -53,41 +53,37 @@ export function ContentTable({
   };
 
   const renderSortHeader = (field: SortField, label: string, showForType?: 'base' | 'update' | 'dlc') => {
-    // Si showForType est spécifié et que tous les éléments ne sont pas de ce type, masquer la colonne
     const shouldShow = !showForType || items.every(item => item.type === showForType);
     if (!shouldShow) return null;
 
     return (
-      <th className="px-6 py-3 text-left">
-        <button
-          onClick={() => onSort(field)}
-          className="flex items-center space-x-2 group w-full"
-        >
-          <span className={`
-            text-xs font-medium uppercase tracking-wider
-            ${sortField === field ? 'text-primary' : 'text-muted-foreground'}
-            group-hover:text-primary transition-colors
-          `}>
-            {label}
-          </span>
-          <span className={`
-            transition-all duration-200
-            ${sortField === field ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'}
-          `}>
-            {sortField === field && (
-              sortDirection === 'asc' ? (
-                <ArrowUp className="h-4 w-4" />
-              ) : (
-                <ArrowDown className="h-4 w-4" />
-              )
-            )}
-          </span>
-        </button>
-      </th>
+      <button
+        onClick={() => onSort(field)}
+        className="flex items-center space-x-2 group w-full"
+      >
+        <span className={`
+          text-xs font-medium uppercase tracking-wider
+          ${sortField === field ? 'text-primary' : 'text-muted-foreground'}
+          group-hover:text-primary transition-colors
+        `}>
+          {label}
+        </span>
+        <span className={`
+          transition-all duration-200
+          ${sortField === field ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'}
+        `}>
+          {sortField === field && (
+            sortDirection === 'asc' ? (
+              <ArrowUp className="h-4 w-4" />
+            ) : (
+              <ArrowDown className="h-4 w-4" />
+            )
+          )}
+        </span>
+      </button>
     );
   };
 
-  // Vérifier si nous affichons des jeux de base
   const showingBaseGames = items.length > 0 && items[0].type === 'base';
 
   return (
@@ -96,17 +92,29 @@ export function ContentTable({
         <table className="min-w-full divide-y divide-border">
           <thead className="bg-muted">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider w-24">
+              <th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider w-16 sm:w-24">
                 Icon
               </th>
-              {renderSortHeader('id', 'Title ID')}
-              {renderSortHeader('name', 'Name')}
-              {renderSortHeader('size', 'Size')}
-              {showingBaseGames && renderSortHeader('releaseDate', 'Release Date', 'base')}
-              <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              <th className="px-3 sm:px-6 py-3 text-left">
+                {renderSortHeader('id', 'Title ID')}
+              </th>
+              <th className="px-3 sm:px-6 py-3 text-left">
+                {renderSortHeader('name', 'Name')}
+              </th>
+              <th className="hidden sm:table-cell px-3 sm:px-6 py-3 text-left">
+                {renderSortHeader('size', 'Size')}
+              </th>
+              {showingBaseGames && (
+                <th className="hidden md:table-cell px-3 sm:px-6 py-3 text-left">
+                  {renderSortHeader('releaseDate', 'Release Date', 'base')}
+                </th>
+              )}
+              <th className="hidden sm:table-cell px-3 sm:px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 Related Content
               </th>
-              <th className="px-6 py-3 text-right"></th>
+              <th className="px-3 sm:px-6 py-3 text-right">
+                <span className="sr-only">Actions</span>
+              </th>
             </tr>
           </thead>
           <tbody className="divide-y divide-border">
@@ -116,7 +124,7 @@ export function ContentTable({
                 onClick={() => handleDetails(item.id)}
                 className="group hover:bg-muted/50 active:bg-muted transition-colors cursor-pointer"
               >
-                <td className="px-6 py-4">
+                <td className="px-3 sm:px-6 py-4">
                   <div className="icon-container transform group-hover:scale-105 transition-transform duration-200">
                     <img
                       src={getIconUrl(item.id)}
@@ -129,8 +137,8 @@ export function ContentTable({
                     />
                   </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="font-mono text-sm group-hover:text-primary transition-colors">
+                <td className="px-3 sm:px-6 py-4">
+                  <div className="font-mono text-xs sm:text-sm group-hover:text-primary transition-colors">
                     {item.id}
                   </div>
                   {item.version && (
@@ -139,27 +147,30 @@ export function ContentTable({
                     </div>
                   )}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm group-hover:text-primary transition-colors">
+                <td className="px-3 sm:px-6 py-4">
+                  <div className="text-sm group-hover:text-primary transition-colors line-clamp-2 sm:line-clamp-1">
                     {item.name || 'Unknown Title'}
                   </div>
+                  <div className="sm:hidden text-xs text-muted-foreground mt-1">
+                    {formatFileSize(item.size)}
+                  </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
+                <td className="hidden sm:table-cell px-3 sm:px-6 py-4 whitespace-nowrap">
                   <div className="text-sm text-muted-foreground">
                     {formatFileSize(item.size)}
                   </div>
                 </td>
                 {showingBaseGames && (
-                  <td className="px-6 py-4 whitespace-nowrap">
+                  <td className="hidden md:table-cell px-3 sm:px-6 py-4 whitespace-nowrap">
                     <div className="text-sm text-muted-foreground">
                       {formatDate(item.releaseDate)}
                     </div>
                   </td>
                 )}
-                <td className="px-6 py-4 whitespace-nowrap">
+                <td className="hidden sm:table-cell px-3 sm:px-6 py-4">
                   {getContentBadges(item.id)}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
+                <td className="px-3 sm:px-6 py-4 text-right">
                   <Info className="h-5 w-5 text-primary opacity-0 group-hover:opacity-100 transition-opacity" />
                 </td>
               </tr>
@@ -181,8 +192,8 @@ export function ContentTable({
       )}
 
       {selectedId && (
-        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-          <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-border">
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50">
+          <div className="bg-card rounded-lg shadow-xl w-full max-h-[95vh] overflow-y-auto border border-border sm:max-w-4xl">
             <GameDetails
               content={getRelatedContent(allItems, selectedId)}
               onClose={() => setSelectedId(null)}
diff --git a/src/components/GameDetails.tsx b/src/components/GameDetails.tsx
index bbbb90a..a7c8eb8 100644
--- a/src/components/GameDetails.tsx
+++ b/src/components/GameDetails.tsx
@@ -21,10 +21,10 @@ function ContentList({ items, maxVisible = 5, type }: ContentListProps) {
     <div className="space-y-3">
       {visibleItems.map(item => (
         <div key={item.uniqueId} className="text-sm">
-          <p className="font-mono text-xs text-muted-foreground">
+          <p className="font-mono text-xs text-muted-foreground break-all">
             {item.id}
           </p>
-          {item.name && <p className="text-sm">{item.name}</p>}
+          {item.name && <p className="text-sm break-words">{item.name}</p>}
           {item.version && type === 'update' && (
             <p className="text-xs text-muted-foreground mt-1">
               Version {item.version}
@@ -67,18 +67,18 @@ export function GameDetails({ content, onClose }: GameDetailsProps) {
   const assets = getVisualAssets(base.id);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 sm:p-6 space-y-4 sm:space-y-6">
       <div className="flex items-center justify-between">
-        <h2 className="text-xl font-bold">Content Details</h2>
-        <div className="flex items-center space-x-3">
+        <h2 className="text-lg sm:text-xl font-bold line-clamp-1">{base.name || 'Content Details'}</h2>
+        <div className="flex items-center space-x-2 sm:space-x-3">
           <a
             href={`https://stats.ghostland.at/${base.id}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
+            className="flex items-center space-x-1 sm:space-x-2 px-2 sm:px-3 py-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors text-sm"
           >
             <ExternalLink className="h-4 w-4" />
-            <span>View Stats</span>
+            <span className="hidden sm:inline">View Stats</span>
           </a>
           <button
             onClick={onClose}
@@ -90,7 +90,6 @@ export function GameDetails({ content, onClose }: GameDetailsProps) {
         </div>
       </div>
 
-      {/* Banner */}
       <div className="relative aspect-video rounded-lg overflow-hidden bg-muted">
         <img
           src={assets.banner}
@@ -103,8 +102,7 @@ export function GameDetails({ content, onClose }: GameDetailsProps) {
         />
       </div>
 
-      {/* Content Info */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         <div className="bg-card border border-border p-4 rounded-lg">
           <div className="flex items-center space-x-3 mb-3">
             <img
@@ -118,10 +116,10 @@ export function GameDetails({ content, onClose }: GameDetailsProps) {
             />
             <div>
               <h3 className="text-sm font-medium">Base Game</h3>
-              <p className="text-xs text-muted-foreground font-mono">{base.id}</p>
+              <p className="text-xs text-muted-foreground font-mono break-all">{base.id}</p>
             </div>
           </div>
-          {base.name && <p className="text-sm mb-2">{base.name}</p>}
+          {base.name && <p className="text-sm mb-2 break-words">{base.name}</p>}
           {base.size && (
             <p className="text-sm text-muted-foreground">
               Size: {formatFileSize(base.size)}
@@ -163,7 +161,6 @@ export function GameDetails({ content, onClose }: GameDetailsProps) {
         )}
       </div>
 
-      {/* Screenshots */}
       <ScreenshotGallery screenshots={assets.screenshots} />
     </div>
   );
diff --git a/src/components/ScreenshotGallery.tsx b/src/components/ScreenshotGallery.tsx
index 1c0f78d..4df6a16 100644
--- a/src/components/ScreenshotGallery.tsx
+++ b/src/components/ScreenshotGallery.tsx
@@ -11,7 +11,7 @@ export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
       <h3 className="text-sm font-medium text-foreground mb-3">Screenshots</h3>
       
       <Gallery>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4">
           {screenshots.map((url, index) => (
             <Item
               key={index}
@@ -36,7 +36,7 @@ export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
                     }}
                   />
                   <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                    <span className="text-white text-sm font-medium">
+                    <span className="text-white text-xs sm:text-sm font-medium">
                       View Fullscreen
                     </span>
                   </div>
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 7f895c9..dcffd88 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -31,8 +31,8 @@ export function Settings({ onClose }: SettingsProps) {
   } = useUserPreferences();
 
   return (
-    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full border border-border">
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50">
+      <div className="bg-card rounded-lg shadow-xl w-full max-w-lg border border-border">
         <div className="flex items-center justify-between p-4 border-b border-border">
           <div className="flex items-center space-x-2">
             <SettingsIcon className="h-5 w-5 text-primary" />
@@ -47,7 +47,6 @@ export function Settings({ onClose }: SettingsProps) {
         </div>
 
         <div className="p-4 space-y-6 max-h-[calc(100vh-200px)] overflow-y-auto">
-          {/* Search Settings */}
           <section className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground">Search Settings</h3>
             
@@ -64,7 +63,7 @@ export function Settings({ onClose }: SettingsProps) {
                 onChange={(e) => setNamePrecision(parseFloat(e.target.value))}
                 className="w-full accent-primary"
               />
-              <div className="flex justify-between text-sm text-muted-foreground mt-1">
+              <div className="flex justify-between text-xs sm:text-sm text-muted-foreground mt-1">
                 <span>Exact Match</span>
                 <span>Fuzzy Match</span>
               </div>
@@ -83,14 +82,13 @@ export function Settings({ onClose }: SettingsProps) {
                 onChange={(e) => setTidPrecision(parseFloat(e.target.value))}
                 className="w-full accent-primary"
               />
-              <div className="flex justify-between text-sm text-muted-foreground mt-1">
+              <div className="flex justify-between text-xs sm:text-sm text-muted-foreground mt-1">
                 <span>Exact Match</span>
                 <span>Partial Match</span>
               </div>
             </div>
           </section>
 
-          {/* Display Settings */}
           <section className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground">Display Settings</h3>
             
@@ -101,7 +99,7 @@ export function Settings({ onClose }: SettingsProps) {
               <select
                 value={itemsPerPage}
                 onChange={(e) => setItemsPerPage(Number(e.target.value))}
-                className="w-full bg-muted border border-border rounded-lg px-3 py-2"
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm"
               >
                 <option value={10}>10 items</option>
                 <option value={25}>25 items</option>
@@ -157,7 +155,7 @@ export function Settings({ onClose }: SettingsProps) {
               <select
                 value={maxDlcDisplay}
                 onChange={(e) => setMaxDlcDisplay(Number(e.target.value))}
-                className="w-full bg-muted border border-border rounded-lg px-3 py-2"
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm"
               >
                 <option value={5}>5 DLCs</option>
                 <option value={10}>10 DLCs</option>
@@ -174,7 +172,7 @@ export function Settings({ onClose }: SettingsProps) {
               <select
                 value={maxUpdateDisplay}
                 onChange={(e) => setMaxUpdateDisplay(Number(e.target.value))}
-                className="w-full bg-muted border border-border rounded-lg px-3 py-2"
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm"
               >
                 <option value={5}>5 Updates</option>
                 <option value={10}>10 Updates</option>
@@ -191,7 +189,7 @@ export function Settings({ onClose }: SettingsProps) {
               <select
                 value={autoRefreshInterval || ''}
                 onChange={(e) => setAutoRefreshInterval(e.target.value ? Number(e.target.value) : null)}
-                className="w-full bg-muted border border-border rounded-lg px-3 py-2"
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm"
               >
                 <option value="">Disabled</option>
                 <option value="300000">5 minutes</option>
@@ -202,7 +200,6 @@ export function Settings({ onClose }: SettingsProps) {
             </div>
           </section>
 
-          {/* Advanced Settings */}
           <section className="border-t border-border pt-4">
             <button
               onClick={() => setShowAdvanced(!showAdvanced)}
@@ -226,7 +223,7 @@ export function Settings({ onClose }: SettingsProps) {
                     type="url"
                     value={dataSources.workingContent}
                     onChange={(e) => setDataSource('workingContent', e.target.value)}
-                    className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm"
+                    className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-xs sm:text-sm break-all"
                     placeholder="Enter URL for working.txt"
                   />
                 </div>
@@ -239,7 +236,7 @@ export function Settings({ onClose }: SettingsProps) {
                     type="url"
                     value={dataSources.titlesDb}
                     onChange={(e) => setDataSource('titlesDb', e.target.value)}
-                    className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm"
+                    className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-xs sm:text-sm break-all"
                     placeholder="Enter URL for titles_db.txt"
                   />
                 </div>