Spaces:
Running
Running
Merge pull request #18 from huggingface/fix_ios_scrolling
Browse files- src/App.tsx +7 -6
- src/components/ui/dialog.tsx +2 -1
- src/components/ui/popover.tsx +4 -1
- src/index.css +7 -1
- src/pages/Index.tsx +4 -1
src/App.tsx
CHANGED
@@ -1,4 +1,3 @@
|
|
1 |
-
|
2 |
import { Toaster } from "@/components/ui/toaster";
|
3 |
import { Toaster as Sonner } from "@/components/ui/sonner";
|
4 |
import { TooltipProvider } from "@/components/ui/tooltip";
|
@@ -16,11 +15,13 @@ const App = () => (
|
|
16 |
<Toaster />
|
17 |
<Sonner />
|
18 |
<BrowserRouter>
|
19 |
-
<
|
20 |
-
<
|
21 |
-
|
22 |
-
|
23 |
-
|
|
|
|
|
24 |
</BrowserRouter>
|
25 |
</TooltipProvider>
|
26 |
</QueryClientProvider>
|
|
|
|
|
1 |
import { Toaster } from "@/components/ui/toaster";
|
2 |
import { Toaster as Sonner } from "@/components/ui/sonner";
|
3 |
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
|
15 |
<Toaster />
|
16 |
<Sonner />
|
17 |
<BrowserRouter>
|
18 |
+
<div className="min-h-screen w-full" style={{ WebkitOverflowScrolling: "touch" }}>
|
19 |
+
<Routes>
|
20 |
+
<Route path="/" element={<Index />} />
|
21 |
+
<Route path="/calendar" element={<Calendar />} />
|
22 |
+
<Route path="*" element={<NotFound />} />
|
23 |
+
</Routes>
|
24 |
+
</div>
|
25 |
</BrowserRouter>
|
26 |
</TooltipProvider>
|
27 |
</QueryClientProvider>
|
src/components/ui/dialog.tsx
CHANGED
@@ -36,9 +36,10 @@ const DialogContent = React.forwardRef<
|
|
36 |
<DialogPrimitive.Content
|
37 |
ref={ref}
|
38 |
className={cn(
|
39 |
-
"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",
|
40 |
className
|
41 |
)}
|
|
|
42 |
{...props}
|
43 |
>
|
44 |
{children}
|
|
|
36 |
<DialogPrimitive.Content
|
37 |
ref={ref}
|
38 |
className={cn(
|
39 |
+
"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",
|
40 |
className
|
41 |
)}
|
42 |
+
style={{ WebkitOverflowScrolling: "touch" }}
|
43 |
{...props}
|
44 |
>
|
45 |
{children}
|
src/components/ui/popover.tsx
CHANGED
@@ -17,9 +17,12 @@ const PopoverContent = React.forwardRef<
|
|
17 |
align={align}
|
18 |
sideOffset={sideOffset}
|
19 |
className={cn(
|
20 |
-
"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",
|
21 |
className
|
22 |
)}
|
|
|
|
|
|
|
23 |
{...props}
|
24 |
/>
|
25 |
</PopoverPrimitive.Portal>
|
|
|
17 |
align={align}
|
18 |
sideOffset={sideOffset}
|
19 |
className={cn(
|
20 |
+
"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",
|
21 |
className
|
22 |
)}
|
23 |
+
style={{ WebkitOverflowScrolling: "touch" }}
|
24 |
+
collisionPadding={10}
|
25 |
+
avoidCollisions={true}
|
26 |
{...props}
|
27 |
/>
|
28 |
</PopoverPrimitive.Portal>
|
src/index.css
CHANGED
@@ -1,4 +1,3 @@
|
|
1 |
-
|
2 |
@tailwind base;
|
3 |
@tailwind components;
|
4 |
@tailwind utilities;
|
@@ -27,6 +26,13 @@
|
|
27 |
--radius: 0.5rem;
|
28 |
}
|
29 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
30 |
body {
|
31 |
@apply bg-neutral-light text-neutral-dark antialiased;
|
32 |
}
|
|
|
|
|
1 |
@tailwind base;
|
2 |
@tailwind components;
|
3 |
@tailwind utilities;
|
|
|
26 |
--radius: 0.5rem;
|
27 |
}
|
28 |
|
29 |
+
html, body {
|
30 |
+
@apply h-full w-full;
|
31 |
+
-webkit-overflow-scrolling: touch;
|
32 |
+
position: relative;
|
33 |
+
overscroll-behavior-y: none;
|
34 |
+
}
|
35 |
+
|
36 |
body {
|
37 |
@apply bg-neutral-light text-neutral-dark antialiased;
|
38 |
}
|
src/pages/Index.tsx
CHANGED
@@ -199,7 +199,10 @@ const Index = () => {
|
|
199 |
<div className="mb-4">
|
200 |
<h4 className="text-sm font-medium text-gray-800">Country</h4>
|
201 |
</div>
|
202 |
-
<div
|
|
|
|
|
|
|
203 |
{getAllCountries(conferencesData as Conference[]).map(country => (
|
204 |
<div key={country} className="flex items-center space-x-2 hover:bg-gray-50 p-1 rounded">
|
205 |
<Checkbox
|
|
|
199 |
<div className="mb-4">
|
200 |
<h4 className="text-sm font-medium text-gray-800">Country</h4>
|
201 |
</div>
|
202 |
+
<div
|
203 |
+
className="max-h-60 overflow-y-auto space-y-2 bg-white overscroll-contain touch-pan-y"
|
204 |
+
style={{ WebkitOverflowScrolling: "touch" }}
|
205 |
+
>
|
206 |
{getAllCountries(conferencesData as Conference[]).map(country => (
|
207 |
<div key={country} className="flex items-center space-x-2 hover:bg-gray-50 p-1 rounded">
|
208 |
<Checkbox
|