Fix: Use native select for better viewport handling

- Replaced custom dropdown with native <select>
- Automatically handles viewport boundaries
- Cancel button now visible
- More compact layout

frontend/src/components/FeedbackSection.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Check, X, ChevronDown, Send, MessageSquare } from 'lucide-react';
+import { Check, X, Send, MessageSquare } from 'lucide-react';
 import { FETAL_VIEW_LABELS, submitFeedback, FeedbackCreate, ClassificationResult } from '../lib/api';
 
 interface FeedbackSectionProps {
@@ -30,7 +30,6 @@ export function FeedbackSection({
   const [notes, setNotes] = useState<string>('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
-  const [showDropdown, setShowDropdown] = useState(false);
 
   const handleFeedback = async (isCorrect: boolean) => {
     if (disabled || !topPrediction) return;
@@ -42,7 +41,6 @@ export function FeedbackSection({
     } else {
       // Show correction form for incorrect predictions
       setFeedbackState('incorrect');
-      setShowDropdown(true);
     }
   };
 
@@ -142,40 +140,25 @@ export function FeedbackSection({
       {/* Correction form */}
       {feedbackState === 'incorrect' && (
         <div className="space-y-3 pt-2 border-t border-border">
-          {/* Label dropdown */}
-          <div className="relative">
+          {/* Native select - handles viewport boundaries automatically */}
+          <div>
             <label className="block text-xs font-medium text-gray-600 mb-1.5">Correct Label</label>
-            <button
-              onClick={() => setShowDropdown(!showDropdown)}
-              className="w-full flex items-center justify-between px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-sm text-left hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
+            <select
+              value={correctLabel}
+              onChange={(e) => setCorrectLabel(e.target.value)}
+              className="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 transition-all cursor-pointer"
             >
-              <span className={correctLabel ? 'text-gray-800 font-medium' : 'text-gray-400'}>
-                {correctLabel || 'Select correct view...'}
-              </span>
-              <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${showDropdown ? 'rotate-180' : ''}`} />
-            </button>
-            
-            {showDropdown && (
-              <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-60 overflow-y-auto">
-                {FETAL_VIEW_LABELS.map((label) => (
-                  <button
-                    key={label}
-                    onClick={() => {
-                      setCorrectLabel(label);
-                      setShowDropdown(false);
-                    }}
-                    className={`w-full px-3 py-2.5 text-sm text-left transition-colors border-b border-gray-100 last:border-b-0
-                      ${label === correctLabel ? 'bg-primary/10 text-primary font-medium' : 'text-gray-700 hover:bg-gray-50'}
-                      ${label === topPrediction?.label ? 'opacity-50 bg-gray-50' : ''}`}
-                  >
-                    {label}
-                    {label === topPrediction?.label && (
-                      <span className="text-xs text-gray-400 ml-2">(predicted)</span>
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
+              <option value="" disabled>Select correct view...</option>
+              {FETAL_VIEW_LABELS.map((label) => (
+                <option 
+                  key={label} 
+                  value={label}
+                  disabled={label === topPrediction?.label}
+                >
+                  {label}{label === topPrediction?.label ? ' (predicted)' : ''}
+                </option>
+              ))}
+            </select>
           </div>
 
           {/* Notes input */}
@@ -184,34 +167,34 @@ export function FeedbackSection({
             <textarea
               value={notes}
               onChange={(e) => setNotes(e.target.value)}
-              placeholder="Any additional notes about this case..."
-              className="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-sm text-gray-800 resize-none h-16 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 transition-all"
+              placeholder="Any additional notes..."
+              className="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm text-gray-800 resize-none h-14 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 transition-all"
             />
           </div>
 
-          {/* Submit button */}
-          <div className="flex gap-2">
+          {/* Action buttons - inline */}
+          <div className="flex gap-2 items-center">
             <button
               onClick={() => {
                 setFeedbackState('none');
                 setCorrectLabel('');
                 setNotes('');
               }}
-              className="px-3 py-1.5 text-sm text-text-muted hover:text-text-primary transition-colors"
+              className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium"
             >
               Cancel
             </button>
             <button
               onClick={handleSubmitCorrection}
               disabled={!correctLabel || isSubmitting}
-              className="flex-1 flex items-center justify-center gap-2 px-3 py-1.5 bg-primary hover:bg-primary-hover text-white rounded-md text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {isSubmitting ? (
                 <span>Submitting...</span>
               ) : (
                 <>
                   <Send className="w-3.5 h-3.5" />
-                  <span>Submit Correction</span>
+                  <span>Submit</span>
                 </>
               )}
             </button>