Display metric value boxes in single row

Updated CSS for .metric-summary to use grid-template-columns: repeat(4, 1fr)
instead of auto-fit to ensure all 4 metric cards display in one row on desktop.
Added mobile responsive breakpoint for 2 columns on screens under 768px.

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

Co-Authored-By: Claude <noreply@anthropic.com>

Author: jasdumas

donor-retention-forecaster/app.R

@@ -94,11 +94,17 @@ ui <- fluidPage(
 
       .metric-summary {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-template-columns: repeat(4, 1fr);
         gap: 1rem;
         margin: 1.5rem 0;
       }
 
+      @media (max-width: 768px) {
+        .metric-summary {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
       .metric-card {
         background: white;
         border: 1px solid #e9ecef;