Merge pull request #18 from huggingface/fix_ios_scrolling

src/App.tsx

@@ -1,4 +1,3 @@
-
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -16,11 +15,13 @@ const App = () => (
       <Toaster />
       <Sonner />
       <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Index />} />
-          <Route path="/calendar" element={<Calendar />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
+        <div className="min-h-screen w-full" style={{ WebkitOverflowScrolling: "touch" }}>
+          <Routes>
+            <Route path="/" element={<Index />} />
+            <Route path="/calendar" element={<Calendar />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </div>
       </BrowserRouter>
     </TooltipProvider>
   </QueryClientProvider>

src/components/ui/dialog.tsx

@@ -36,9 +36,10 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dialog-content",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dialog-content max-h-[85vh] overflow-y-auto overscroll-contain touch-pan-y",
         className
       )}
+      style={{ WebkitOverflowScrolling: "touch" }}
       {...props}
     >
       {children}

src/components/ui/popover.tsx

@@ -17,9 +17,12 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[65vh] overflow-y-auto overscroll-contain touch-pan-y",
         className
       )}
+      style={{ WebkitOverflowScrolling: "touch" }}
+      collisionPadding={10}
+      avoidCollisions={true}
       {...props}
     />
   </PopoverPrimitive.Portal>

src/index.css

@@ -1,4 +1,3 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -27,6 +26,13 @@
     --radius: 0.5rem;
   }
 
+  html, body {
+    @apply h-full w-full;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
+    overscroll-behavior-y: none;
+  }
+
   body {
     @apply bg-neutral-light text-neutral-dark antialiased;
   }

src/pages/Index.tsx

@@ -199,7 +199,10 @@ const Index = () => {
                       <div className="mb-4">
                         <h4 className="text-sm font-medium text-gray-800">Country</h4>
                       </div>
-                      <div className="max-h-60 overflow-y-auto space-y-2 bg-white">
+                      <div 
+                        className="max-h-60 overflow-y-auto space-y-2 bg-white overscroll-contain touch-pan-y" 
+                        style={{ WebkitOverflowScrolling: "touch" }}
+                      >
                         {getAllCountries(conferencesData as Conference[]).map(country => (
                           <div key={country} className="flex items-center space-x-2 hover:bg-gray-50 p-1 rounded">
                             <Checkbox