From 9a84a67555c6ce563e82f70946fd7836a226f8fb Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 2 Nov 2025 21:29:51 +0100
Subject: [PATCH] Improve margins for mobile

---
 web/components/filters/mobile-filters.tsx | 16 ++++++++--------
 web/components/nav/sidebar.tsx            |  5 ++++-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/components/filters/mobile-filters.tsx b/web/components/filters/mobile-filters.tsx
index d189e490..728776c9 100644
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -59,14 +59,14 @@ function MobileFilters(props: {
   )
 
   return (
-    <Col className="mb-4">
-      <div
-        // className="fixed inset-x-0 bg-canvas-50"
-        style={{
-          // bottom: 0,
-          height: 'env(safe-area-inset-top)',
-        }}
-      />
+    <Col className="mb-[calc(20px+env(safe-area-inset-bottom))] mt-[calc(20px+env(safe-area-inset-top))]">
+      {/*<div*/}
+      {/*  // className="fixed inset-x-0 bg-canvas-50"*/}
+      {/*  style={{*/}
+      {/*    // bottom: 0,*/}
+      {/*    height: 'env(safe-area-inset-top)',*/}
+      {/*  }}*/}
+      {/*/>*/}
       <Row>
         <Col className="p-4 pb-2">
           <MyMatchesToggle
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 28a6e0fc..429e21ab 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -31,7 +31,10 @@ export default function Sidebar(props: {
   return (
     <nav
       aria-label="Sidebar"
-      className={clsx('flex h-screen flex-col h-full max-h-screen overflow-y-auto', className)}
+      className={clsx(
+        'flex h-screen flex-col h-full max-h-screen overflow-y-auto mb-[calc(env(safe-area-inset-bottom))] mt-[calc(env(safe-area-inset-top))]',
+        className
+      )}
     >
       <SiteLogo/>