Improves styling and shot trajectory visibility

Adopts a neutral background and darker text for readability
Refines shadows and borders for a subtle, modern look
Increases shot trajectory stroke width to enhance clarity

Author: mbertelsen

src/components/CourseInfoBanner.css

@@ -1,11 +1,11 @@
 /* Course Info Banner Styles */
 .course-info-banner {
-  background: linear-gradient(135deg, #ff7a00 0%, #ff8d26 100%);
-  color: white;
+  background: #f8f9fa;
+  color: #1f2937;
   padding: 12px 16px;
   border-radius: 8px;
   margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   gap: 16px;
   align-items: flex-start;
@@ -73,25 +73,25 @@
   font-weight: 700;
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .progress-hole {
-  color: white;
+  color: #1f2937;
 }
 
 .progress-shot {
-  color: white;
+  color: #1f2937;
 }
 
 .progress-player {
-  color: white;
-  opacity: 0.9;
+  color: #1f2937;
+  opacity: 0.8;
   font-weight: 600;
 }
 
 .progress-separator {
-  color: white;
+  color: #1f2937;
   opacity: 0.5;
   font-weight: 400;
 }

src/components/MeasurementTilesView.css

@@ -3,8 +3,9 @@
   padding: 12px;
   background: #f8f9fa;
   border-radius: 8px;
-  max-height: calc(100vh - 200px);
+  flex: 1;
   overflow-y: auto;
+  min-height: 0;
 }
 
 /* Controls Section */

src/components/ShotTrajectoryOverlay.tsx

@@ -199,15 +199,15 @@ const ShotTrajectoryOverlay: React.FC<Props> = ({
                     x2={shot.finish.x}
                     y2={shot.finish.y}
                     stroke="rgba(0, 0, 0, 0.3)"
-                    strokeWidth="7"
+                    strokeWidth="12"
                     strokeLinecap="round"
                   />
 
                   {/* Shot trajectory line (curved, white) */}
                   <path
                     d={curvePath}
                     stroke="white"
-                    strokeWidth="7"
+                    strokeWidth="12"
                     strokeLinecap="round"
                     fill="none"
                     opacity="0.9"

src/components/WebhookInspector.css

@@ -12,7 +12,8 @@
 .event-session-indicators{display:flex;gap:6px;margin-top:6px;align-items:center}
 .session-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,0.1)}
 .no-events{padding:12px;color:#666}
-.webhook-inspector-preview{flex:1;padding:12px;overflow:auto;min-width:0}
+.webhook-inspector-preview{flex:1;padding:12px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
+.webhook-inspector-preview > div{display:flex;flex-direction:column;flex:1;min-height:0}
 .preview-title{margin-top:0}
 .preview-time{margin-bottom:8px;color:#666}
 .preview-json{background:#fafafa;padding:12px;border-radius:6px;overflow:auto}