Fix mobile view overflow in program-analysis and financial-reports pages

🔧 Mobile Header Controls Fix:
- Changed header controls from horizontal flex to responsive flex-col/flex-row
- Added proper mobile stacking for select boxes and buttons
- Implemented w-full sm:w-auto for proper mobile sizing

📱 Key Mobile Improvements:
- Header controls now stack vertically on mobile (< 640px)
- Select boxes use full width on mobile, auto width on larger screens
- Buttons adapt with shortened text labels on mobile
- Added proper gap spacing (gap-3 sm:gap-4) for consistent spacing

🎯 Specific Changes:
Financial Reports:
- "Export Report" → "Export" on mobile
- Full-width select boxes and button on mobile
- Vertical stacking prevents horizontal overflow

Program Analysis:
- "Generate Report" → "Generate" on mobile
- Same responsive pattern applied
- Consistent mobile behavior

🔨 Additional CSS Enhancements:
- Added header-content width management for mobile
- Select box text-overflow: ellipsis for long options
- min-width: 0 to prevent select box expansion
- Maintained existing mobile responsive patterns

✅ Overflow Issues Resolved:
- No more horizontal scrolling on mobile devices
- Touch-friendly interface with proper spacing
- Maintains functionality while improving UX
- Consistent with Botnar spacing system

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

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

Author: babayomi

design-system/pages/financial-reports/index.html

@@ -116,6 +116,17 @@
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
         }
+        
+        /* Mobile header controls */
+        .header-content > div:last-child {
+          width: 100%;
+        }
+        
+        /* Mobile select boxes */
+        select {
+          min-width: 0;
+          text-overflow: ellipsis;
+        }
       }
 
       @media (max-width: 768px) {
@@ -442,12 +453,12 @@
                   </p>
                 </div>
               </div>
-              <div class="flex items-center space-x-4">
+              <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
                 <!-- Year Selector -->
                 <select
                   x-model="selectedYear"
                   @change="updateYear()"
-                  class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm"
+                  class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm w-full sm:w-auto"
                 >
                   <option value="2025">2025</option>
                   <option value="2024">2024</option>
@@ -459,7 +470,7 @@
                 <select
                   x-model="currency"
                   @change="updateCurrency()"
-                  class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm"
+                  class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm w-full sm:w-auto"
                 >
                   <option value="EUR">EUR (€)</option>
                   <option value="USD">USD ($)</option>
@@ -469,7 +480,7 @@
                 <!-- Export Button -->
                 <button
                   @click="exportFinancialReport()"
-                  class="btn btn-primary text-sm"
+                  class="btn btn-primary text-sm w-full sm:w-auto flex items-center justify-center"
                 >
                   <svg
                     class="w-4 h-4 mr-2"
@@ -484,7 +495,8 @@
                       d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                     />
                   </svg>
-                  Export Report
+                  <span class="hidden sm:inline">Export Report</span>
+                  <span class="sm:hidden">Export</span>
                 </button>
               </div>
             </div>

design-system/pages/program-analysis/index.html

@@ -143,6 +143,17 @@
             .timeline-item {
                 padding-left: 1rem;
             }
+            
+            /* Mobile header controls */
+            .header-content > div:last-child {
+                width: 100%;
+            }
+            
+            /* Mobile select boxes */
+            select {
+                min-width: 0;
+                text-overflow: ellipsis;
+            }
         }
 
         @media (max-width: 768px) {
@@ -326,10 +337,10 @@ <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Program Analysis
                                 <p class="text-gray-600 dark:text-gray-300">Deep dive into program performance and strategic insights</p>
                             </div>
                         </div>
-                        <div class="flex items-center space-x-4">
+                        <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
                             <!-- Analysis Type Selector -->
                             <select x-model="analysisType" @change="updateAnalysisType()" 
-                                    class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
+                                    class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm w-full sm:w-auto">
                                 <option value="performance">Performance Analysis</option>
                                 <option value="comparative">Comparative Analysis</option>
                                 <option value="predictive">Predictive Analysis</option>
@@ -338,19 +349,20 @@ <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Program Analysis
 
                             <!-- Time Range -->
                             <select x-model="timeRange" @change="updateTimeRange()" 
-                                    class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
+                                    class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm w-full sm:w-auto">
                                 <option value="3m">Last 3 Months</option>
                                 <option value="6m">Last 6 Months</option>
                                 <option value="1y">Last Year</option>
                                 <option value="all">All Time</option>
                             </select>
 
                             <!-- Generate Report Button -->
-                            <button @click="generateAnalysisReport()" class="btn btn-primary text-sm">
+                            <button @click="generateAnalysisReport()" class="btn btn-primary text-sm w-full sm:w-auto flex items-center justify-center">
                                 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                 </svg>
-                                Generate Report
+                                <span class="hidden sm:inline">Generate Report</span>
+                                <span class="sm:hidden">Generate</span>
                             </button>
                         </div>
                     </div>