No sticky filter form on mobile

ooni · Jan 9, 2025 · a4638c0 · a4638c0
1 parent ffddc21
commit a4638c0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/components/SharedStyledComponents.js b/components/SharedStyledComponents.js
@@ -1,3 +1,5 @@
+import { twMerge } from 'tailwind-merge'
+
 export const StyledSticky = ({ ...props }) => (
   <div
     className="sticky top-0 bg-white z-[99] border-b border-gray-300"
@@ -9,9 +11,12 @@ export const StyledStickyNavBar = ({ ...props }) => (
   <div className="sticky top-0 z-[100]" {...props} />
 )
 
-export const StyledStickySubMenu = ({ topClass, ...props }) => (
+export const StyledStickySubMenu = ({ className, ...props }) => (
   <div
-    className={`${topClass ? topClass : 'top-[62px]'} sticky  bg-white z-[99] border-b border-gray-300 md:mt-8 mb-2 pb-2 md:pb-0`}
+    className={twMerge(
+      'top-[62px] sticky bg-white z-[99] border-b border-gray-300 md:mt-8 mb-2 pb-2 md:pb-0',
+      className,
+    )}
     {...props}
   />
 )
@@ -34,7 +39,7 @@ export const StickySubMenuUpdated = ({ title, menu, topClass, ...props }) => {
 
 export const StickySubMenu = ({ title, children, topClass }) => {
   return (
-    <StyledStickySubMenu topClass={topClass}>
+    <StyledStickySubMenu className={topClass}>
       <div className="flex justify-between items-start md:items-center flex-col md:flex-row">
         <h1 className="mt-1">{title}</h1>
         {children}

diff --git a/components/ThematicPage.tsx b/components/ThematicPage.tsx
@@ -67,7 +67,7 @@ const ThematicPage = ({
         <AnchorLink id="reports" />
         <ReportsSection title={reportsTitle} reports={reports} theme={theme} />
 
-        <StyledStickySubMenu topClass="top-[193px]">
+        <StyledStickySubMenu className="top-[193px] max-sm:static">
           <div className="pb-4 pt-2">
             <Form
               countries={countries}