From 2a96a4bfafa4861cb7ed2639d44e46970eaeff95 Mon Sep 17 00:00:00 2001
From: Peter Foster <peter@foster.net>
Date: Thu, 22 Jan 2026 19:37:34 +0000
Subject: [PATCH] fix: Improve file list display with inline size and better
 separation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move file size inline after filename
- Add container border around entire file list
- Add alternating row backgrounds for better delineation
- Use border-bottom between items instead of margin
- Reduce icon size for tighter layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/RealCV.Web/Components/Pages/Check.razor | 62 ++++++++++++++++-----
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/RealCV.Web/Components/Pages/Check.razor b/src/RealCV.Web/Components/Pages/Check.razor
index 06da85f..98ff5bb 100644
--- a/src/RealCV.Web/Components/Pages/Check.razor
+++ b/src/RealCV.Web/Components/Pages/Check.razor
@@ -154,20 +154,20 @@
                                                 <div class="file-type-icon me-2 @(file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase) ? "pdf" : "docx")">
                                                     @if (file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase))
                                                     {
-                                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                                             <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                                                         </svg>
                                                     }
                                                     else
                                                     {
-                                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                                             <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                                                         </svg>
                                                     }
                                                 </div>
                                                 <div class="flex-grow-1 min-width-0">
-                                                    <p class="mb-0 fw-medium small text-truncate">@file.Name</p>
-                                                    <small class="text-muted" style="font-size: 0.75rem;">@FormatFileSize(file.Size)</small>
+                                                    <span class="file-name">@file.Name</span>
+                                                    <span class="file-size">@FormatFileSize(file.Size)</span>
                                                 </div>
                                             </div>
                                             <button class="btn btn-sm btn-outline-danger" @onclick="() => RemoveFile(file)">
@@ -267,39 +267,71 @@
         user-select: none;
     }
 
+    .file-list {
+        border: 1px solid var(--realcv-gray-200);
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
     .file-list-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border: 1px solid var(--realcv-gray-200);
-        border-radius: 8px;
         padding: 0.5rem 0.75rem;
-        margin-bottom: 0.375rem;
         background: var(--realcv-bg-surface);
-        transition: all 0.2s ease;
+        border-bottom: 1px solid var(--realcv-gray-200);
+        transition: background 0.15s ease;
+    }
+
+    .file-list-item:last-child {
+        border-bottom: none;
     }
 
     .file-list-item:hover {
-        border-color: var(--realcv-primary);
-        box-shadow: 0 2px 8px rgba(59, 111, 212, 0.08);
+        background: var(--realcv-bg-muted);
+    }
+
+    .file-list-item:nth-child(even) {
+        background: rgba(0, 0, 0, 0.015);
+    }
+
+    .file-list-item:nth-child(even):hover {
+        background: var(--realcv-bg-muted);
+    }
+
+    .file-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--realcv-text-primary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .file-size {
+        font-size: 0.75rem;
+        color: var(--realcv-gray-500);
+        margin-left: 0.5rem;
+        flex-shrink: 0;
     }
 
     .file-type-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 6px;
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
         display: flex;
         align-items: center;
         justify-content: center;
+        flex-shrink: 0;
     }
 
     .file-type-icon.pdf {
-        background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%);
+        background: #fef2f2;
         color: #dc2626;
     }
 
     .file-type-icon.docx {
-        background: linear-gradient(135deg, #e3ecf7 0%, #d4e4f4 100%);
+        background: #eff6ff;
         color: var(--realcv-primary);
     }