From 07249ce84ca2f0a1ecd2c33f74c5a55c644f0778 Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <da.nguyen8744@gmail.com>
Date: Fri, 15 Aug 2025 17:29:17 -0400
Subject: [PATCH] Minor change

---
 templates/dashboard.html | 195 +++++++++++++++++++++++++++++++--------
 1 file changed, 158 insertions(+), 37 deletions(-)

diff --git a/templates/dashboard.html b/templates/dashboard.html
index 2376e81..702a4ce 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -173,8 +173,8 @@
 
 .project-qr-grid {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-3);
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: var(--spacing-4);
   padding: var(--spacing-6);
 }
 
@@ -204,14 +204,15 @@
 .qr-card-compact {
   display: flex;
   align-items: center;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   width: 100%;
   padding: var(--spacing-3);
+  min-height: 80px;
 }
 
 .qr-preview-compact {
-  width: 70px;
-  height: 70px;
+  width: 60px;
+  height: 60px;
   flex-shrink: 0;
   border-radius: var(--radius-md);
   overflow: hidden;
@@ -232,24 +233,31 @@
 .qr-info-compact {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
 }
 
 .qr-name-compact {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--gray-900);
-  margin: 0 0 var(--spacing-1) 0;
-  line-height: 1.4;
+  margin: 0;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .qr-details-row {
   display: flex;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   flex-wrap: wrap;
+  align-items: center;
 }
 
 .qr-url-short {
-  max-width: 200px;
+  max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -257,7 +265,6 @@
 
 .qr-status-compact {
   flex-shrink: 0;
-  margin: 0 var(--spacing-3);
 }
 
 .qr-actions-compact {
@@ -269,13 +276,14 @@
 /* Standard QR Card Layout for Project Cards */
 .qr-card-layout {
   display: flex;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   margin-bottom: var(--spacing-3);
+  align-items: flex-start;
 }
 
 .qr-preview-large {
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
   flex-shrink: 0;
   border-radius: var(--radius-md);
   overflow: hidden;
@@ -297,48 +305,53 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-1);
+  min-width: 0;
 }
 
 .qr-name {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--gray-900);
   margin: 0 0 var(--spacing-1) 0;
-  line-height: 1.4;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .qr-detail-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: var(--font-size-sm);
+  gap: 0.4rem;
+  font-size: var(--font-size-xs);
   color: var(--gray-600);
   min-width: 0;
 }
 
 .qr-detail-item i {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   width: auto;
   flex-shrink: 0;
   color: var(--gray-400);
 }
 
 .qr-detail-item span {
-  word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
 .qr-status-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-1);
-  padding: 0.25rem 0.5rem;
+  padding: 0.2rem 0.4rem;
   border-radius: var(--radius-full);
-  font-size: var(--font-size-xs);
+  font-size: 0.65rem;
   font-weight: 500;
+  margin-top: var(--spacing-1);
 }
 
 .qr-status-badge.active {
@@ -353,15 +366,16 @@
 
 .qr-card-actions {
   display: flex;
-  gap: var(--spacing-2);
+  gap: var(--spacing-1);
   justify-content: flex-start;
-  padding-top: var(--spacing-3);
+  padding-top: var(--spacing-2);
   border-top: 1px solid var(--gray-200);
+  margin-top: var(--spacing-2);
 }
 
 .qr-action-btn {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: var(--radius-md);
   border: none;
   display: flex;
@@ -369,7 +383,7 @@
   justify-content: center;
   cursor: pointer;
   transition: var(--transition);
-  font-size: var(--font-size-sm);
+  font-size: 0.75rem;
   text-decoration: none;
 }
 
@@ -679,10 +693,103 @@
   min-width: 140px;
 }
 
-/* Animations */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+/* Image Lightbox Styles */
+.image-lightbox {
+  display: none;
+  position: fixed;
+  z-index: 2000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease;
+  cursor: pointer;
+}
+
+.lightbox-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  text-align: center;
+}
+
+.lightbox-image {
+  max-width: 100%;
+  max-height: 80vh;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  background: var(--white);
+  padding: var(--spacing-4);
+}
+
+.lightbox-close {
+  position: absolute;
+  top: -50px;
+  right: 0;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 1.2rem;
+  color: var(--gray-700);
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lightbox-close:hover {
+  background: var(--white);
+  color: var(--gray-900);
+}
+
+.lightbox-info {
+  color: var(--white);
+  margin-top: var(--spacing-4);
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+}
+
+.lightbox-hint {
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: var(--spacing-2);
+  font-size: var(--font-size-sm);
+}
+
+/* Make QR images clickable */
+.qr-preview-large,
+.qr-preview-compact {
+  cursor: zoom-in;
+  position: relative;
+}
+
+.qr-preview-large::after,
+.qr-preview-compact::after {
+  content: '🔍';
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition);
+}
+
+.qr-card:hover .qr-preview-large::after,
+.qr-card:hover .qr-preview-compact::after {
+  opacity: 1;
 }
 
 @keyframes slideIn {
@@ -718,10 +825,17 @@
     gap: var(--spacing-2);
   }
 
+  .project-qr-grid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-3);
+    padding: var(--spacing-4);
+  }
+
   .qr-card-compact {
     flex-direction: column;
     text-align: center;
-    gap: var(--spacing-3);
+    gap: var(--spacing-2);
+    padding: var(--spacing-2);
   }
   
   .qr-info-compact {
@@ -730,7 +844,7 @@
   
   .qr-details-row {
     flex-direction: column;
-    gap: var(--spacing-2);
+    gap: var(--spacing-1);
     align-items: center;
   }
   
@@ -745,16 +859,17 @@
   .qr-card-layout {
     flex-direction: column;
     text-align: center;
+    align-items: center;
   }
   
   .qr-preview-large {
-    align-self: center;
-    width: 80px;
-    height: 80px;
+    width: 70px;
+    height: 70px;
   }
   
   .qr-details {
     align-items: center;
+    width: 100%;
   }
   
   .qr-detail-item {
@@ -807,6 +922,12 @@
     overflow: visible;
     text-overflow: unset;
   }
+
+  .project-qr-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-2);
+    padding: var(--spacing-3);
+  }
   
   .modal-header {
     padding: var(--spacing-4);