Enhance My Files view: smaller fonts for name/date, wrap filenames in grid, shorter date format

This commit is contained in:
DJP 2025-12-11 11:40:33 -05:00
parent 71c5a594b7
commit b53958f48b

View file

@ -164,9 +164,9 @@ export default function MyFilesPage() {
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
month: '2-digit',
day: '2-digit',
year: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
@ -557,8 +557,8 @@ export default function MyFilesPage() {
{/* Info */}
<div className="p-2">
<p className="text-sm text-white truncate">{asset.filename}</p>
<p className="text-xs text-gray-500">{formatDate(asset.created_at)}</p>
<p className="text-[10px] text-white break-words line-clamp-2 leading-tight min-h-[2.5em]">{asset.filename}</p>
<p className="text-[9px] text-gray-500">{formatDate(asset.created_at)}</p>
</div>
</div>
);
@ -589,14 +589,14 @@ export default function MyFilesPage() {
{selectedAssetsMap.has(asset.id) ? <CheckSquare className="w-4 h-4 text-forge-yellow" /> : <Square className="w-4 h-4" />}
</button>
<Icon className={clsx('w-5 h-5', colorClass)} />
<span className="text-white">{asset.filename}</span>
<span className="text-[11px] text-white">{asset.filename}</span>
</div>
</td>
<td className="px-4 py-3 text-gray-400 capitalize">{asset.file_type}</td>
<td className="px-4 py-3 text-gray-400">
{asset.source_module?.replace('_', ' ') || 'Upload'}
</td>
<td className="px-4 py-3 text-gray-400">{formatDate(asset.created_at)}</td>
<td className="px-4 py-3 text-[10px] text-gray-400">{formatDate(asset.created_at)}</td>
<td className="px-4 py-3">
<div className="flex items-center justify-end gap-2">
<button