Design hotfixes and improvements.

frontend/src/views/HomeView.css

@@ -3,13 +3,113 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  overflow: hidden;
-  padding: 1rem var(--margin-main);
+  min-height: 100%;
+  max-width: 100%;
+  width: 100%;
+  padding: 1rem;
   gap: 1.5rem;
   animation: fadeInUp 0.6s ease-out;
 }
 
+/* Mobile optimizations */
+@media (max-width: 768px) {
+  .home-view {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+  
+  .home-logo-wrapper {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .home-logo {
+    width: min(12rem, 80vw);
+  }
+  
+  .home-desc {
+    font-size: clamp(0.9rem, 5vw, 1.125rem);
+    max-width: 90%;
+    text-align: center;
+  }
+  
+  .home-cards {
+    width: 100%;
+    max-width: 100%;
+    gap: 1rem;
+  }
+  
+  .home-card {
+    min-height: 4rem;
+    padding: 0.75rem 1rem;
+    gap: 0.75rem;
+    flex-direction: row;
+  }
+  
+  .home-card-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  
+  .home-card-label {
+    font-size: 1rem;
+  }
+}
+
+/* Tablet optimizations */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .home-view {
+    padding: 1rem 0.5rem;
+  }
+  
+  .home-card {
+    min-height: 4.25rem;
+    padding: 0.75rem 1.25rem;
+  }
+  
+  .home-card-icon {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+/* Desktop optimizations */
+@media (min-width: 1025px) {
+  .home-view {
+    padding: 1rem var(--margin-main);
+    max-width: 100%;
+  }
+  
+  .home-hero {
+    text-align: left;
+    align-items: flex-start;
+  }
+  
+  .home-logo-wrapper {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  
+  .home-desc {
+    font-size: 1.125rem;
+    max-width: 30rem;
+    text-align: left;
+  }
+  
+  .home-cards {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    max-width: 80rem;
+  }
+  
+  .home-card {
+    min-height: 5rem;
+    padding: 1rem 1.5rem;
+    flex-direction: row;
+  }
+}
+
 .home-hero {
   display: flex;
   flex-direction: column;
@@ -19,7 +119,7 @@
 }
 
 .home-logo-wrapper {
-  display: flex;
+  display: contents;
   flex-direction: row;
   align-items: center;
   justify-content: center;
@@ -87,15 +187,27 @@
 }
 
 .home-card--search {
-  background: var(--primary);
-  color: var(--on-primary);
-  box-shadow: 0 4px 16px rgba(0, 69, 13, 0.3);
+  /* Make suggestion/search buttons softer and more harmonious */
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  box-shadow: 0 6px 18px rgba(13, 43, 18, 0.06);
 }
 
 .home-card--scan {
-  background: var(--secondary);
-  color: var(--on-secondary);
-  box-shadow: 0 4px 16px rgba(43, 91, 181, 0.3);
+  /* Keep the scan button vivid and easy to find (intentionally prominent) */
+  background: #2b5bb5; /* vivid blue to stand out */
+  color: #ffffff;
+  box-shadow: 0 8px 28px rgba(43, 91, 181, 0.28);
+  transform: translateY(0);
+}
+
+.home-card--scan:hover {
+  transform: translateY(-3px);
+}
+
+.home-card--scan:focus {
+  outline: none;
+  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 28px rgba(43,91,181,0.28);
 }
 
 .home-card-icon {