From d2ef19b519dacc336cea59cc796c0674a265f450 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 7 Jun 2026 09:45:09 +0200
Subject: [PATCH] Prevent FAB from overlapping paginators on mobile

---
 .../pages/portfolio/activities/activities-page.html   |  2 +-
 apps/client/src/styles.scss                           |  6 ++++++
 libs/ui/src/lib/page-tabs/page-tabs.component.scss    | 11 +++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.html b/apps/client/src/app/pages/portfolio/activities/activities-page.html
index f06947988..23e0cef02 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.html
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="mb-3 row">
+  <div class="row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Activities</h1>
       <gf-activities-table
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 045de2eb6..09771a222 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -495,6 +495,12 @@ ngx-skeleton-loader {
     @media (min-width: 576px) {
       padding: 2rem 0;
     }
+
+    // Reserve space so a floating action button does not overlap trailing content
+    &:has(gf-fab) {
+      padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
+      padding-bottom: calc(constant(safe-area-inset-bottom) + 6rem);
+    }
   }
 }
 
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.scss b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
index 0b377e57a..aca2a1d94 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
@@ -21,6 +21,17 @@
       @media (max-width: 575.98px) {
         padding: 1rem 0;
       }
+
+      // Reserve space so a floating action button does not overlap trailing content
+      &:has(gf-fab) {
+        padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
+        padding-bottom: calc(constant(safe-area-inset-bottom) + 6rem);
+
+        @media (max-width: 575.98px) {
+          padding-bottom: calc(env(safe-area-inset-bottom) + 7.5rem);
+          padding-bottom: calc(constant(safe-area-inset-bottom) + 7.5rem);
+        }
+      }
     }
   }