From e6df9846464f70b27f7f54ed6376abfe646bba91 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Sat, 30 May 2026 17:59:16 -0600
Subject: [PATCH] fix(ui): improve mobile layout and spacing for document list
 and gallery views

- Adjust GalleryView container structure and paddings for better mobile scrolling
- Refine document preview and details sizing for smaller screens
- Update ListView grid columns and icon sizing for improved mobile fit
- Ensure icons do not shrink and maintain alignment on all devices

These changes enhance usability and visual consistency of document views on mobile devices.
---
 src/components/doclist/views/GalleryView.tsx |  8 +++++---
 src/components/doclist/views/ListView.tsx    | 10 +++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/doclist/views/GalleryView.tsx b/src/components/doclist/views/GalleryView.tsx
index eb8fd7b..862f523 100644
--- a/src/components/doclist/views/GalleryView.tsx
+++ b/src/components/doclist/views/GalleryView.tsx
@@ -174,10 +174,11 @@ export function GalleryView({
 
   return (
     <div className="flex-1 min-h-0 flex flex-col">
-      <div className="flex-1 min-h-0 flex items-center justify-center p-6 bg-background">
+      <div className="flex-1 min-h-0 overflow-y-auto bg-background">
+        <div className="min-h-full flex items-center justify-center p-3 sm:p-6">
         {activeDoc ? (
           <div className="w-full max-w-[920px] flex flex-col md:flex-row items-center md:items-start justify-center gap-4 md:gap-6">
-            <div className="flex flex-col items-center gap-3 w-[260px] sm:w-[320px] shrink-0">
+            <div className="flex flex-col items-center gap-3 w-[180px] sm:w-[260px] md:w-[320px] shrink-0">
               <div className="w-full aspect-[3/4] rounded-lg overflow-hidden border border-offbase shadow-lg">
                 <DocumentPreview doc={activeDoc} />
               </div>
@@ -206,7 +207,7 @@ export function GalleryView({
                 </button>
               </div>
             </div>
-            <dl className="w-full max-w-[360px] md:max-w-[340px] grid grid-cols-2 gap-x-2 gap-y-1 rounded-md border border-offbase bg-base px-3 py-2 text-[11px] md:self-center">
+            <dl className="w-full max-w-[280px] sm:max-w-[360px] md:max-w-[340px] grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-offbase bg-base px-3 py-2 text-[11px] md:self-center">
               <dt className="text-muted">Type</dt>
               <dd className="text-foreground text-right uppercase tracking-wide">{activeDoc.type}</dd>
               <dt className="text-muted">Size</dt>
@@ -234,6 +235,7 @@ export function GalleryView({
         ) : (
           <p className="text-[12px] text-muted">No documents to show</p>
         )}
+        </div>
       </div>
 
       <div className="shrink-0 border-t border-offbase bg-gradient-to-b from-base to-offbase/30">
diff --git a/src/components/doclist/views/ListView.tsx b/src/components/doclist/views/ListView.tsx
index e73f3ab..676b157 100644
--- a/src/components/doclist/views/ListView.tsx
+++ b/src/components/doclist/views/ListView.tsx
@@ -29,9 +29,9 @@ function formatDate(ms: number): string {
 }
 
 function KindIcon({ doc }: { doc: DocumentListDocument }) {
-  if (doc.type === 'pdf') return <PDFIcon className="w-4 h-4 text-red-500" />;
-  if (doc.type === 'epub') return <EPUBIcon className="w-4 h-4 text-blue-500" />;
-  return <FileIcon className="w-4 h-4 text-muted" />;
+  if (doc.type === 'pdf') return <PDFIcon className="w-4 h-4 shrink-0 text-red-500" />;
+  if (doc.type === 'epub') return <EPUBIcon className="w-4 h-4 shrink-0 text-blue-500" />;
+  return <FileIcon className="w-4 h-4 shrink-0 text-muted" />;
 }
 
 function HeaderCell({
@@ -131,7 +131,7 @@ function DocRow({
       data-doc-tile
       aria-selected={isSelected}
       className={
-        'grid grid-cols-[minmax(0,1fr)_72px_88px_120px_28px] sm:grid-cols-[minmax(0,1fr)_88px_96px_140px_32px] items-center text-[12px] border-b border-offbase transition-colors duration-200 ease-out ' +
+        'grid grid-cols-[minmax(0,1fr)_44px_72px_104px_28px] sm:grid-cols-[minmax(0,1fr)_56px_96px_140px_32px] items-center text-[12px] border-b border-offbase transition-colors duration-200 ease-out ' +
         (isSelected
           ? 'bg-offbase text-accent'
           : 'text-foreground hover:bg-offbase') +
@@ -198,7 +198,7 @@ export function ListView({
 
   return (
     <div onClick={handleBackgroundClick} className="flex-1 min-h-0 overflow-y-auto">
-      <div className="sticky top-0 z-10 bg-base border-b border-offbase grid grid-cols-[minmax(0,1fr)_72px_88px_120px_28px] sm:grid-cols-[minmax(0,1fr)_88px_96px_140px_32px]">
+      <div className="sticky top-0 z-10 bg-base border-b border-offbase grid grid-cols-[minmax(0,1fr)_44px_72px_104px_28px] sm:grid-cols-[minmax(0,1fr)_56px_96px_140px_32px]">
         <HeaderCell label="Name" field="name" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} />
         <HeaderCell label="Kind" field="type" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} />
         <HeaderCell label="Size" field="size" sortBy={sortBy} sortDirection={sortDirection} onSortChange={onSortChange} align="right" />