Update src/components/LoadingScreen.tsx

src/components/LoadingScreen.tsx

@@ -16,6 +16,7 @@ type Dot = {
   pulse: number;
   pulseSpeed: number;
 };
+
 export const LoadingScreen = ({
   isLoading,
   progress,
@@ -44,7 +45,7 @@ export const LoadingScreen = ({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const dropdownBtnRef = useRef<HTMLButtonElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null); // NEW: anchor for centering
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   // For keyboard navigation
   const [activeIndex, setActiveIndex] = useState(
@@ -54,7 +55,7 @@ export const LoadingScreen = ({
     )
   );
 
-  // Background Animation Effect (crisper dots + reduced motion)
+  // Background Animation Effect
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -198,7 +199,7 @@ export const LoadingScreen = ({
     return () => window.removeEventListener("resize", onResize);
   }, []);
 
-  // Compute portal style based on the whole button group (center + clamp + optional drop-up)
+  // Compute portal style
   const portalStyle = useMemo(() => {
     if (typeof window === "undefined") return {};
     const anchor = wrapperRef.current || dropdownBtnRef.current;
@@ -221,7 +222,7 @@ export const LoadingScreen = ({
     // Flip up if not enough space below
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
-    const estimatedItemH = 56; // rough item height
+    const estimatedItemH = 56;
     const estimatedPad = 16;
     const estimatedHeight =
       estimatedItemH * Math.min(MODEL_OPTIONS.length, 6) + estimatedPad;
@@ -234,7 +235,7 @@ export const LoadingScreen = ({
       left: `${left}px`,
       top: `${top}px`,
       width: `${dropdownWidth}px`,
-      zIndex: 100,
+      zIndex: 9999,
     };
   }, []);
 
@@ -343,7 +344,7 @@ export const LoadingScreen = ({
                 rel="noopener noreferrer"
                 className="text-indigo-400 hover:underline"
               >
-                Liquid AI’s
+                Liquid AI's
               </a>{" "}
               LFM2 hybrid models, optimized for on-device deployment and edge AI
               scenarios.
@@ -373,7 +374,7 @@ export const LoadingScreen = ({
 
           <div className="relative">
             <div
-              ref={wrapperRef} // anchor for dropdown centering
+              ref={wrapperRef}
               className="flex rounded-2xl shadow-2xl overflow-hidden"
             >
               <button
@@ -461,7 +462,7 @@ export const LoadingScreen = ({
                   style={portalStyle}
                   role="menu"
                   aria-label="Model options"
-                  className="bg-gray-800/95 border border-gray-600/50 rounded-2xl shadow-2xl overflow-hidden animate-in slide-in-from-top-2 duration-200 dropdown-z30"
+                  className="bg-gray-800/95 border border-gray-600/50 rounded-2xl shadow-2xl overflow-hidden animate-in slide-in-from-top-2 duration-200"
                 >
                   {MODEL_OPTIONS.map((option, index) => {
                     const selected = selectedModelId === option.id;
@@ -532,7 +533,7 @@ export const LoadingScreen = ({
       {/* Click-away fallback for touch devices */}
       {isModelDropdownOpen && (
         <div
-          className="fixed inset-0 z-40 bg-black/20"
+          className="fixed inset-0 z-[9998] bg-black/20"
           onClick={(e) => {
             const target = e.target as Node;
             if (