fix(web): adjust drag thresholds and update scrollbar styles in Lobby components

Author: mirza-mohammad24

apps/web/src/components/Lobby/CustomWordsDrawer.tsx

@@ -101,7 +101,7 @@ export const CustomWordsDrawer = ({
 
   // Handle Swipe-to-Close for Mobile
   const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
-    if (info.offset.y > 100 || info.velocity.y > 500) {
+    if (info.offset.y > 50 || info.velocity.y > 200) {
       if (!isGenerating) onClose();
     }
   };
@@ -209,8 +209,8 @@ export const CustomWordsDrawer = ({
         >
           <motion.div
             drag="y" // Enables vertical dragging
-            dragConstraints={{ top: 0, bottom: 0 }} // Prevents dragging upwards
-            dragElastic={0.2}
+            dragConstraints={{ top: 0 }} // Prevents dragging upwards
+            dragElastic={{ top: 0, bottom: 0.8 }}
             onDragEnd={handleDragEnd}
             initial={{ y: '100%' }}
             animate={{ y: 0 }}

apps/web/src/components/Lobby/LobbyScreen.tsx

@@ -230,7 +230,7 @@ export const LobbyScreen = ({
 
         {/* LEFT COLUMN: SETTINGS */}
         <div
-          className={`flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden custom-scrollbar md:pr-2 ${activeTab === 'settings' ? 'flex' : 'hidden md:flex'}`}
+          className={`flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden scrollbar-none [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] md:pr-2 ${activeTab === 'settings' ? 'flex' : 'hidden md:flex'}`}
         >
           <div className="flex justify-between items-center shrink-0">
             <div className="flex items-center gap-3">
@@ -670,7 +670,7 @@ export const LobbyScreen = ({
             variants={listVariants}
             initial="hidden"
             animate="show"
-            className="grid grid-cols-2 min-[400px]:grid-cols-3 md:flex md:flex-col gap-3 mt-4 overflow-y-auto custom-scrollbar pr-1 md:pr-2 pb-2 flex-1 min-h-0 content-start"
+            className="grid grid-cols-2 min-[400px]:grid-cols-3 md:flex md:flex-col gap-3 mt-4 overflow-y-auto scrollbar-none [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] pr-1 md:pr-2 pb-2 flex-1 min-h-0 content-start"
           >
             <AnimatePresence mode="popLayout">
               {players.map((p) => (