From 8bc237f1d8fac8b87ad34a98be5a65e72d746dcb Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 25 May 2026 09:00:39 -0700
Subject: [PATCH] Updates docx and pptx file icon dimensions

---
 frontend/src/components/FileExplorer.tsx | 4 ++--
 frontend/src/components/OfficeHome.tsx   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 797d68a..c4aedd3 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -1168,7 +1168,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
     if (ext === 'docx' || ext === 'doc') {
       return (
-        <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#2B579A]`}>
+        <div className={`${large ? 'w-20 h-28 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#2B579A]`}>
           W
         </div>
       );
@@ -1176,7 +1176,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
     if (ext === 'pptx' || ext === 'ppt') {
       return (
-        <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#D24726]`}>
+        <div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#D24726]`}>
           P
         </div>
       );
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index 9b72f41..383f2a6 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -218,7 +218,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
         <button 
           onClick={() => !isRenaming && onFileSelect(file)}
           onContextMenu={(e) => handleContextMenu(e, file)}
-          className="w-full aspect-[1/1.4] rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative"
+          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`}
           style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
         >
           <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
@@ -262,7 +262,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
             <div className="flex flex-col gap-3">
               <button
                 onClick={handleCreateBlank}
-                className="w-40 h-52 rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group"
+                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`}
                 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" />
@@ -284,7 +284,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 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            <div className={`grid ${type === 'docs' ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6' : '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>
           )}
@@ -301,7 +301,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 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            <div className={`grid ${type === 'docs' ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6' : '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>
           )}