Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Docs tab to use horizontal tiles to prevent vertical cropping
All checks were successful
Automated Container Build / build-and-push (push) Successful in 28s
Details

Browse source
This commit is contained in:
Elijah 2026-06-15 17:52:30 -07:00
parent 6ee4f56e1e
commit c9e078586f
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/OfficeHome.tsx
View file

@ -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>
)}