From b90ca876dbbec8890df9007dd3113630b43a2647 Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Fri, 24 Oct 2025 15:42:30 +0200
Subject: [PATCH] style: improve media library card layout with larger grid
 cells and better text wrapping

---
 apps/admin/src/components/MediaLibrary.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/admin/src/components/MediaLibrary.tsx b/apps/admin/src/components/MediaLibrary.tsx
index aca7670..41720a7 100644
--- a/apps/admin/src/components/MediaLibrary.tsx
+++ b/apps/admin/src/components/MediaLibrary.tsx
@@ -98,27 +98,27 @@ export default function MediaLibrary({ onInsert, onSetFeature, showSetFeature }:
         </Stack>
       </Stack>
       {error && <Typography color="error" sx={{ mb: 1 }}>{error}</Typography>}
-      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 1.5 }}>
+      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 1.5 }}>
         {filtered.map((it) => {
           const url = `/api/media/obj?key=${encodeURIComponent(it.key)}`;
           const name = it.key.split('/').slice(-1)[0];
           return (
-            <Paper key={it.key} sx={{ p: 1.25, display: 'flex', flexDirection: 'column', height: 260 }}>
-              <Box sx={{ width: '100%', flex: '0 0 140px', display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 1, overflow: 'hidden', background: '#fafafa', borderRadius: 1 }}>
+            <Paper key={it.key} sx={{ p: 1.25, display: 'flex', flexDirection: 'column', minHeight: 320, overflow: 'hidden' }}>
+              <Box sx={{ width: '100%', flex: '0 0 150px', display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 1, overflow: 'hidden', background: '#fafafa', borderRadius: 1 }}>
                 <a href={url} target="_blank" rel="noreferrer">
-                  <img src={url} alt={name} style={{ maxWidth: '100%', maxHeight: '140px', objectFit: 'contain', display: 'block' }} />
+                  <img src={url} alt={name} style={{ maxWidth: '100%', maxHeight: '150px', objectFit: 'contain', display: 'block' }} />
                 </a>
               </Box>
-              <Typography variant="caption" noWrap sx={{ display: 'block' }} title={name}>{name}</Typography>
+              <Typography variant="caption" sx={{ display: 'block', whiteSpace: 'normal', overflowWrap: 'anywhere' }} title={name}>{name}</Typography>
               <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>{fmtSize(it.size)} · {fmtDate(it.lastModified)}</Typography>
               <Box sx={{ flexGrow: 1 }} />
-              <Stack direction="row" spacing={1} sx={{ mt: 1, flexWrap: 'wrap' }}>
-                <Button size="small" variant="outlined" sx={{ flex: '1 1 48%' }} onClick={() => onInsert(url)}>Insert</Button>
+              <Stack direction="row" spacing={1} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
+                <Button size="small" variant="outlined" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => onInsert(url)}>Insert</Button>
                 {showSetFeature && onSetFeature && (
-                  <Button size="small" variant="outlined" sx={{ flex: '1 1 48%' }} onClick={() => onSetFeature(url)}>Set Feature</Button>
+                  <Button size="small" variant="outlined" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => onSetFeature(url)}>Set Feature</Button>
                 )}
-                <Button size="small" variant="text" sx={{ flex: '1 1 48%' }} onClick={() => copyUrl(url)}>Copy URL</Button>
-                <Button size="small" color="error" variant="text" sx={{ flex: '1 1 48%' }} onClick={() => { if (confirm('Delete this image?')) del(it.key) }}>Delete</Button>
+                <Button size="small" variant="text" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => copyUrl(url)}>Copy URL</Button>
+                <Button size="small" color="error" variant="text" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => { if (confirm('Delete this image?')) del(it.key) }}>Delete</Button>
               </Stack>
             </Paper>
           );