From 4243e38ad111bc142de9704a38e64bf3939c3a96 Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <daniel.rebouta@hotmail.de>
Date: Tue, 14 Oct 2025 22:15:56 +0200
Subject: [PATCH 1/7] Fix JumpToTop syle, to make use of transition

---
 website/src/components/misc/page-top.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/website/src/components/misc/page-top.tsx b/website/src/components/misc/page-top.tsx
index 00d4dd0328f..200b9d810c6 100644
--- a/website/src/components/misc/page-top.tsx
+++ b/website/src/components/misc/page-top.tsx
@@ -37,7 +37,6 @@ export const PageTop: FC<PageTopProps> = ({ onTopScroll }) => {
 };
 
 const JumpToTop = styled.button`
-  display: none;
   position: fixed;
   right: 24px;
   bottom: 24px;
@@ -47,11 +46,12 @@ const JumpToTop = styled.button`
   width: 42px;
   height: 42px;
   background-color: ${THEME_COLORS.text};
-  opacity: 0.6;
-  transition: opacity 0.2s ease-in-out;
-
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   &.show {
-    display: initial;
+    opacity: 0.6;
+    visibility: visible;
   }
 
   &:hover {

From fb154fede61e70b8d84ba374f8c7f8a55937ea44 Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <daniel.rebouta@hotmail.de>
Date: Thu, 16 Oct 2025 00:44:07 +0200
Subject: [PATCH 2/7] Use window scroll instead

---
 website/src/components/layout/site/main.tsx | 21 +++++++--------------
 website/src/style/global-style.tsx          |  8 +-------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/website/src/components/layout/site/main.tsx b/website/src/components/layout/site/main.tsx
index dc3d04d801d..bb96e17fd55 100644
--- a/website/src/components/layout/site/main.tsx
+++ b/website/src/components/layout/site/main.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useEffect, useRef } from "react";
+import React, { FC, PropsWithChildren, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
 
@@ -8,7 +8,6 @@ import { Footer } from "./footer";
 import { Header } from "./header";
 
 export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
-  const ref = useRef<HTMLDivElement>(null);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -19,23 +18,19 @@ export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
     );
 
     const handleScroll = () => {
-      if (!ref.current || ref.current.scrollTop === undefined) {
-        return;
-      }
-
       dispatch(
         hasScrolled({
-          yScrollPosition: ref.current.scrollTop,
+          yScrollPosition: window.scrollY,
         })
       );
     };
 
-    ref.current?.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true });
 
     return () => {
-      ref.current?.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
-  }, []);
+  }, [dispatch]);
 
   useEffect(() => {
     const { hash } = window.location;
@@ -48,14 +43,14 @@ export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
   });
 
   const scrollToTop = () => {
-    ref.current?.scrollTo({
+    window.scrollTo({
       top: 0,
       behavior: "smooth",
     });
   };
 
   return (
-    <Container ref={ref}>
+    <Container>
       <Header />
       <Content>{children}</Content>
       <Footer />
@@ -68,8 +63,6 @@ const Container = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  overflow-y: auto;
 `;
 
 const Content = styled.main`
diff --git a/website/src/style/global-style.tsx b/website/src/style/global-style.tsx
index 9b00ea979aa..8b9311c936b 100644
--- a/website/src/style/global-style.tsx
+++ b/website/src/style/global-style.tsx
@@ -19,8 +19,6 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   html {
-    height: 100vh;
-    overflow: hidden;
     font-family: ${FONT_FAMILY};
     font-size: 16px;
     -webkit-text-size-adjust: 100%;
@@ -28,7 +26,7 @@ export const GlobalStyle = createGlobalStyle`
 
   body {
     margin: 0;
-    overflow: hidden;
+    overflow-x: hidden;
     font-size: 1rem;
     letter-spacing: 0.025rem;
     line-height: 1.6em;
@@ -96,10 +94,6 @@ export const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 
-  div, span {
-    overflow: hidden;
-  }
-
   a {
     color: ${THEME_COLORS.link};
     text-decoration: none;

From 033c566c5ef711a02cff8f53c5e97b920bca4f04 Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <daniel.rebouta@hotmail.de>
Date: Tue, 21 Oct 2025 22:24:09 +0200
Subject: [PATCH 3/7] Ensure "position: sticky" keeps working within articles

---
 website/src/components/layout/article/article-layout.tsx | 2 +-
 website/src/components/layout/site/main.tsx              | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/website/src/components/layout/article/article-layout.tsx b/website/src/components/layout/article/article-layout.tsx
index 1ef45b0a1c3..ea90086e058 100644
--- a/website/src/components/layout/article/article-layout.tsx
+++ b/website/src/components/layout/article/article-layout.tsx
@@ -26,7 +26,7 @@ export function ArticleLayout({
 
   return (
     <TabGroupProvider>
-      <LayoutContainer>
+      <LayoutContainer className="article-layout">
         <ArticleLayoutNavigation>{navigation}</ArticleLayoutNavigation>
         <ArticleWrapper ref={ref}>
           <ArticleContainer>
diff --git a/website/src/components/layout/site/main.tsx b/website/src/components/layout/site/main.tsx
index bb96e17fd55..948ed629245 100644
--- a/website/src/components/layout/site/main.tsx
+++ b/website/src/components/layout/site/main.tsx
@@ -71,6 +71,11 @@ const Content = styled.main`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  overflow: visible;
   flex: 1 0 auto;
+  overflow-x: hidden;
+
+  /* Reset overflow-x if acrticle-layout is present to fix "position: sticky" */
+  :has(.article-layout) {
+    overflow-x: visible;
+  }
 `;

From dfc094b34b55cd29f0c108414340b8ee143ad7b0 Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <daniel.rebouta@hotmail.de>
Date: Tue, 21 Oct 2025 22:25:26 +0200
Subject: [PATCH 4/7] Prevent overflow; for mobile mainly

---
 website/src/components/layout/site/header.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/components/layout/site/header.tsx b/website/src/components/layout/site/header.tsx
index 8534fd7b6e0..deae707c776 100644
--- a/website/src/components/layout/site/header.tsx
+++ b/website/src/components/layout/site/header.tsx
@@ -232,6 +232,7 @@ const Container = styled.header`
   border-bottom: 1px solid ${THEME_COLORS.boxBorder};
   width: 100vw;
   height: 72px;
+  overflow: hidden;
 
   ${ApplyBackdropBlur(48, `background-color: ${THEME_COLORS.backgroundMenu};`)}
 `;

From e4ceb950959961b2cdc4460744f6347fb21a2dce Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <daniel.rebouta@hotmail.de>
Date: Tue, 21 Oct 2025 22:26:03 +0200
Subject: [PATCH 5/7] Set background-attachment to fixed

---
 website/src/style/global-style.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/style/global-style.tsx b/website/src/style/global-style.tsx
index 8b9311c936b..dcda60b8efb 100644
--- a/website/src/style/global-style.tsx
+++ b/website/src/style/global-style.tsx
@@ -34,6 +34,7 @@ export const GlobalStyle = createGlobalStyle`
     background-image: radial-gradient(ellipse at bottom, #151135 0%, ${THEME_COLORS.background} 40%);
     background-color: ${THEME_COLORS.background};
     background-size: auto;
+    background-attachment: fixed;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 

From 5f374f15b9efa04e04d873c4425a18e017836a8c Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <daniel.rebouta@hotmail.de>
Date: Tue, 21 Oct 2025 22:27:23 +0200
Subject: [PATCH 6/7] Update Stars component: set canvas position to fixed and
 make eventListener passive

---
 website/src/components/layout/site/site-layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/layout/site/site-layout.tsx b/website/src/components/layout/site/site-layout.tsx
index fc025fda56a..556d860f397 100644
--- a/website/src/components/layout/site/site-layout.tsx
+++ b/website/src/components/layout/site/site-layout.tsx
@@ -141,7 +141,7 @@ function Stars(): ReactElement {
     window.addEventListener("resize", () => {
       setCanvasSize();
       initStars();
-    });
+    }, { passive: true });
 
     setCanvasSize();
     initStars();
@@ -152,7 +152,7 @@ function Stars(): ReactElement {
     <canvas
       ref={canvasRef}
       style={{
-        position: "absolute",
+        position: "fixed",
         top: 0,
         right: 0,
         bottom: 0,

From 0c0032e606d20280be7bd18fcaaae5a08a6d2376 Mon Sep 17 00:00:00 2001
From: Daniel Rebouta <34064225+CronKz@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:51:52 +0200
Subject: [PATCH 7/7] Fix typo

Co-authored-by: Glen <glen.84@gmail.com>
---
 website/src/components/layout/site/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/layout/site/main.tsx b/website/src/components/layout/site/main.tsx
index 948ed629245..987cb6a3cde 100644
--- a/website/src/components/layout/site/main.tsx
+++ b/website/src/components/layout/site/main.tsx
@@ -74,7 +74,7 @@ const Content = styled.main`
   flex: 1 0 auto;
   overflow-x: hidden;
 
-  /* Reset overflow-x if acrticle-layout is present to fix "position: sticky" */
+  /* Reset overflow-x if article-layout is present to fix "position: sticky" */
   :has(.article-layout) {
     overflow-x: visible;
   }