From 1e65270b155ddc099eac10c71150f092b2c3fc9b Mon Sep 17 00:00:00 2001
From: Petr Vecera <vecera.petr@gmail.com>
Date: Wed, 2 Oct 2024 20:04:54 +0200
Subject: [PATCH] Sticky

---
 screens/about/index.tsx | 66 +++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/screens/about/index.tsx b/screens/about/index.tsx
index 92cbdb59..4276a121 100644
--- a/screens/about/index.tsx
+++ b/screens/about/index.tsx
@@ -11,9 +11,7 @@ import {
   Divider,
   Space,
   Text,
-  Affix,
 } from "@mantine/core";
-//import { createStyles } from '@mantine/emotion';
 import React, { useEffect } from "react";
 import { AnalyticsAboutAppPageView } from "../../src/firebase/analytics";
 import { generateKeywordsString } from "../../src/head-utils";
@@ -22,7 +20,6 @@ import DonateSection from "./DonateSection";
 import Link from "next/link";
 import config from "../../config";
 import DataSection from "./DataSection";
-import { useMediaQuery } from "@mantine/hooks";
 
 const BugReports = () => {
   return (
@@ -236,8 +233,6 @@ const About: NextPage = () => {
     AnalyticsAboutAppPageView();
   }, []);
 
-  const isMobile = useMediaQuery("(max-width: 768px)");
-
   return (
     <div>
       {/*This is custom HEAD overwrites the default one*/}
@@ -257,41 +252,36 @@ const About: NextPage = () => {
           {" "}
           <Grid>
             <Grid.Col span={3}>
-              <Affix
-                position={{
-                  top: isMobile ? 150 : 200,
-                  left: isMobile ? 15 : 80,
+              <div
+                style={{
+                  position: "sticky",
+                  top: 150,
+                  display: "block",
+                  height: "auto",
                 }}
               >
-                <div
-                  style={{
-                    display: "block",
-                    height: "auto",
-                  }}
-                >
-                  {sections.map((x) => {
-                    return (
-                      <Flex
-                        key={x.name}
-                        direction={{ base: "column" }}
-                        gap={{ base: "sm", sm: "lg" }}
-                      >
-                        <div>
-                          <Anchor
-                            href={`#${x.name}`}
-                            style={{
-                              color: "inherit",
-                            }}
-                          >
-                            {x.menuDisplayName}
-                          </Anchor>
-                          <Divider my="sm" />
-                        </div>
-                      </Flex>
-                    );
-                  })}
-                </div>
-              </Affix>
+                {sections.map((x) => {
+                  return (
+                    <Flex
+                      key={x.name}
+                      direction={{ base: "column" }}
+                      gap={{ base: "sm", sm: "lg" }}
+                    >
+                      <div>
+                        <Anchor
+                          href={`#${x.name}`}
+                          style={{
+                            color: "inherit",
+                          }}
+                        >
+                          {x.menuDisplayName}
+                        </Anchor>
+                        <Divider my="sm" />
+                      </div>
+                    </Flex>
+                  );
+                })}
+              </div>
             </Grid.Col>
 
             <Grid.Col span={9}>