From 5aa3dfcb4e06118678caba785e7a0562cf0d9cba Mon Sep 17 00:00:00 2001 From: David Scheidt Date: Wed, 9 Jul 2025 17:13:43 +0200 Subject: [PATCH] fix(styles): apply previous overflow fix only for explore page so rest stays untouched --- app/root.tsx | 8 ++------ app/routes/_index.tsx | 29 ++++++++++++++++++++++++----- app/routes/docs.tsx | 24 +++++++++++------------- 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index dd877f0d..c07fb3d5 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -111,17 +111,13 @@ export function App() { useChangeLanguage(data.locale); return ( - + {/* */} - + diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 714fb9fc..9ef0b57f 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,7 +1,13 @@ import { useMediaQuery } from "@mantine/hooks"; import { motion } from "framer-motion"; +import { useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { type LoaderFunctionArgs, data, Link, useLoaderData } from "react-router"; +import { + type LoaderFunctionArgs, + data, + Link, + useLoaderData, +} from "react-router"; import Footer from "~/components/landing/footer"; import { GlobeComponent } from "~/components/landing/globe.client"; import Header from "~/components/landing/header/header"; @@ -12,7 +18,7 @@ import Partners from "~/components/landing/sections/partners"; import PricingPlans from "~/components/landing/sections/pricing-plans"; import Stats from "~/components/landing/stats"; import i18next from "~/i18next.server"; -import { type Partner, getDirectusClient } from "~/lib/directus"; +import { type Partner, getDirectusClient } from "~/lib/directus"; import { getLatestDevices } from "~/models/device.server"; import { getUserId, getUserName } from "~/utils/session.server"; @@ -99,12 +105,25 @@ export default function Index() { const isDesktop = useMediaQuery("(min-width: 768px)"); + /** + * Stupid workaround for chromium and webkit that both render double + * scroll bars when using scrollSnapType. + * Simply setting overflow hidden on the html element fixes it and + * the rest of the pages stay untouched from this. + */ + useEffect(() => { + document.documentElement.style.setProperty("overflow", "hidden"); + return () => { + document.documentElement.style.removeProperty("overflow"); + }; + }, []); + return (
@@ -194,7 +213,7 @@ export default function Index() {
{isDesktop && (
- +
)} diff --git a/app/routes/docs.tsx b/app/routes/docs.tsx index 0e36649e..bdcf7caf 100644 --- a/app/routes/docs.tsx +++ b/app/routes/docs.tsx @@ -16,20 +16,18 @@ export const loader = async () => { }; export default function ApiDocumentation() { - const spec = useLoaderData(); + const spec = useLoaderData(); return ( -
-
-
- API Image -
- +
+
+ API Image
-
+ + ); }