From c9e078586f0586c8ade2bf818fdf7211b2db69d9 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 15 Jun 2026 17:52:30 -0700
Subject: [PATCH] Update Docs tab to use horizontal tiles to prevent vertical
 cropping

---
 frontend/src/components/OfficeHome.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index e100293..0621f77 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -235,7 +235,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
         <button 
           onClick={() => !isRenaming && onFileSelect(file)}
           onContextMenu={(e) => handleContextMenu(e, file)}
-          className={`w-full ${type === 'docs' ? 'aspect-[1/1.4]' : 'aspect-[1.4/1]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
+          className={`w-full aspect-[1.4/1] rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
           style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
         >
           {file.checksum ? (
@@ -285,7 +285,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
             <div className="flex flex-col gap-3">
               <button
                 onClick={handleCreateBlank}
-                className={`${type === 'docs' ? 'w-40 h-52' : 'w-52 h-40'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
+                className={`w-52 h-40 rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
                 style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
               >
                 <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />
@@ -307,7 +307,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
           ) : recentFiles.length === 0 ? (
             <div className="text-sm text-gray-500">No recent {title.toLowerCase()} found.</div>
           ) : (
-            <div className={`grid ${type === 'slides' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'} gap-6`}>
+            <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6`}>
               {recentFiles.map(file => renderFileCard(file))}
             </div>
           )}
@@ -324,7 +324,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
           ) : allFiles.length === 0 ? (
             <div className="text-sm text-gray-500">No {title.toLowerCase()} found in your drive.</div>
           ) : (
-            <div className={`grid ${type === 'slides' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'} gap-6`}>
+            <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6`}>
               {allFiles.map(file => renderFileCard(file))}
             </div>
           )}