From 9cb8c356160796d4b89ad9b22c807dc3bf4a2671 Mon Sep 17 00:00:00 2001
From: Peter Foster <peter@foster.net>
Date: Thu, 22 Jan 2026 19:28:10 +0000
Subject: [PATCH] style: Tighten CV list spacing on dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce table cell padding for more compact rows
- Smaller status badges and icons
- Reduced margins and gaps throughout
- More CVs visible without scrolling

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../Components/Pages/Dashboard.razor          | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/RealCV.Web/Components/Pages/Dashboard.razor b/src/RealCV.Web/Components/Pages/Dashboard.razor
index 1d5cbf2..daff236 100644
--- a/src/RealCV.Web/Components/Pages/Dashboard.razor
+++ b/src/RealCV.Web/Components/Pages/Dashboard.razor
@@ -118,10 +118,10 @@
     else
     {
         <!-- Stats Cards -->
-        <div class="row mb-4 g-4">
+        <div class="row mb-3 g-3">
             <div class="col-md-4">
                 <div class="card border-0 shadow-sm stat-card h-100">
-                    <div class="card-body p-4">
+                    <div class="card-body p-3">
                         <div class="d-flex align-items-center">
                             <div class="stat-icon stat-icon-primary me-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
@@ -139,7 +139,7 @@
             </div>
             <div class="col-md-4">
                 <div class="card border-0 shadow-sm stat-card h-100">
-                    <div class="card-body p-4">
+                    <div class="card-body p-3">
                         <div class="d-flex align-items-center">
                             <div class="stat-icon stat-icon-success me-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
@@ -157,7 +157,7 @@
             </div>
             <div class="col-md-4">
                 <div class="card border-0 shadow-sm stat-card h-100">
-                    <div class="card-body p-4">
+                    <div class="card-body p-3">
                         <div class="d-flex align-items-center">
                             <div class="stat-icon stat-icon-warning me-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
@@ -176,7 +176,7 @@
 
         <!-- Checks List -->
         <div class="card border-0 shadow-sm">
-            <div class="card-header py-3 border-bottom" style="background-color: var(--realcv-bg-surface);">
+            <div class="card-header py-2 px-3 border-bottom" style="background-color: var(--realcv-bg-surface);">
                 <div class="d-flex justify-content-between align-items-center">
                     <div class="d-flex align-items-center gap-3">
                         <h5 class="mb-0 fw-bold">Recent CV Checks</h5>
@@ -203,17 +203,17 @@
                 <table class="table table-hover align-middle mb-0">
                     <thead>
                         <tr style="background-color: var(--realcv-bg-muted);">
-                            <th class="border-0 ps-3 py-3" style="width: 40px;">
+                            <th class="border-0 ps-3 py-2" style="width: 40px;">
                                 <input type="checkbox" class="form-check-input"
                                        checked="@IsAllSelected()"
                                        @onchange="ToggleSelectAll"
                                        title="Select all" />
                             </th>
-                            <th class="border-0 py-3 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Candidate</th>
-                            <th class="border-0 py-3 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Uploaded</th>
-                            <th class="border-0 py-3 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Status</th>
-                            <th class="border-0 py-3 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Score</th>
-                            <th class="border-0 py-3 pe-4 text-uppercase small fw-semibold text-muted text-end" style="letter-spacing: 0.05em;">Actions</th>
+                            <th class="border-0 py-2 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Candidate</th>
+                            <th class="border-0 py-2 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Uploaded</th>
+                            <th class="border-0 py-2 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Status</th>
+                            <th class="border-0 py-2 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Score</th>
+                            <th class="border-0 py-2 pe-4 text-uppercase small fw-semibold text-muted text-end" style="letter-spacing: 0.05em;">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -221,15 +221,15 @@
                         {
                             <tr class="@(check.Status == "Completed" ? "cursor-pointer" : "") @(_selectedIds.Contains(check.Id) ? "table-active" : "")"
                                 @onclick="() => ViewReport(check)">
-                                <td class="ps-3 py-3" @onclick:stopPropagation="true">
+                                <td class="ps-3 py-2" @onclick:stopPropagation="true">
                                     <input type="checkbox" class="form-check-input"
                                            checked="@_selectedIds.Contains(check.Id)"
                                            @onchange="() => ToggleSelection(check.Id)" />
                                 </td>
-                                <td class="py-3">
+                                <td class="py-2">
                                     <div class="d-flex align-items-center">
-                                        <div class="file-icon-wrapper me-3">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-person text-primary" viewBox="0 0 16 16">
+                                        <div class="file-icon-wrapper me-2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-person text-primary" viewBox="0 0 16 16">
                                                 <path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                                 <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.5h2v9.255S12 12 8 12s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h5.5v2z"/>
                                             </svg>
@@ -240,17 +240,17 @@
                                         </div>
                                     </div>
                                 </td>
-                                <td class="py-3">
+                                <td class="py-2">
                                     <div>
                                         <p class="mb-0 small">@check.CreatedAt.ToString("dd MMM yyyy")</p>
                                         <small class="text-muted">@check.CreatedAt.ToString("HH:mm")</small>
                                     </div>
                                 </td>
-                                <td class="py-3 text-center">
+                                <td class="py-2 text-center">
                                     @switch (check.Status)
                                     {
                                         case "Completed":
-                                            <span class="badge rounded-pill bg-success-subtle text-success px-3 py-2">
+                                            <span class="badge rounded-pill bg-success-subtle text-success px-2 py-1">
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-check-circle-fill me-1" viewBox="0 0 16 16">
                                                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                                 </svg>
@@ -258,13 +258,13 @@
                                             </span>
                                             break;
                                         case "Processing":
-                                            <span class="badge rounded-pill bg-primary-subtle text-primary px-3 py-2">
+                                            <span class="badge rounded-pill bg-primary-subtle text-primary px-2 py-1">
                                                 <span class="spinner-border spinner-border-sm me-1" role="status" style="width: 0.75rem; height: 0.75rem;"></span>
                                                 @(check.ProcessingStage ?? "Processing")
                                             </span>
                                             break;
                                         case "Pending":
-                                            <span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">
+                                            <span class="badge rounded-pill bg-secondary-subtle text-secondary px-2 py-1">
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock me-1" viewBox="0 0 16 16">
                                                     <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                                     <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
@@ -273,7 +273,7 @@
                                             </span>
                                             break;
                                         case "Failed":
-                                            <span class="badge rounded-pill bg-danger-subtle text-danger px-3 py-2">
+                                            <span class="badge rounded-pill bg-danger-subtle text-danger px-2 py-1">
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-x-circle-fill me-1" viewBox="0 0 16 16">
                                                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                                                 </svg>
@@ -281,11 +281,11 @@
                                             </span>
                                             break;
                                         default:
-                                            <span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">@check.Status</span>
+                                            <span class="badge rounded-pill bg-secondary-subtle text-secondary px-2 py-1">@check.Status</span>
                                             break;
                                     }
                                 </td>
-                                <td class="py-3 text-center">
+                                <td class="py-2 text-center">
                                     @if (check.VeracityScore.HasValue)
                                     {
                                         <div class="score-ring-container" title="Veracity Score: @check.VeracityScore%">
@@ -303,7 +303,7 @@
                                         <span class="text-muted">--</span>
                                     }
                                 </td>
-                                <td class="py-3 pe-4 text-end">
+                                <td class="py-2 pe-4 text-end">
                                     <div class="d-flex justify-content-end align-items-center gap-2">
                                         @if (check.Status == "Completed")
                                         {
@@ -424,10 +424,10 @@
     }
 
     .file-icon-wrapper {
-        width: 44px;
-        height: 44px;
+        width: 36px;
+        height: 36px;
         background: linear-gradient(135deg, #e8f1fa 0%, #d4e4f4 100%);
-        border-radius: 10px;
+        border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -435,8 +435,8 @@
 
     .score-ring-container {
         position: relative;
-        width: 52px;
-        height: 52px;
+        width: 44px;
+        height: 44px;
         display: inline-flex;
         align-items: center;
         justify-content: center;