Update video modal and styling for better user experience

Reorders VideoModal component logic to ensure hooks are declared before conditional returns and applies updated styling to select and combobox elements in the video edit modal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/HTFgzym

client/src/components/video-modal.tsx

@@ -71,11 +71,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
   const [volume, setVolume] = useState(1);
   const [hoverTime, setHoverTime] = useState(-1);
   
-  // Switch to VAST player for monetization
-  if (isOpen && video && useVASTPlayer && enableAds) {
-    return <VASTPlayer video={video} onClose={onClose} enableAds={enableAds} />;
-  }
-
+  // All hooks must be declared before any conditional returns
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === "Escape" && isOpen) {
@@ -95,6 +91,11 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
       document.body.style.overflow = "";
     };
   }, [isOpen, onClose]);
+  
+  // Switch to VAST player for monetization
+  if (isOpen && video && useVASTPlayer && enableAds) {
+    return <VASTPlayer video={video} onClose={onClose} enableAds={enableAds} />;
+  }
 
   // Initialize HLS when video is available
   useEffect(() => {