From 2faa4c7c89950f33c4755598713f2fe64eea33f0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 7 Jun 2026 10:21:14 +0200
Subject: [PATCH] Bugfix/prevent FAB from overlapping paginators on mobile
 (#7000)

* Prevent FAB from overlapping paginators on mobile

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../portfolio/activities/activities-page.html |  2 +-
 libs/ui/src/lib/fab/fab.component.scss        | 32 +++++++++++++++----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 878641e5f..c903fb38e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Prevented the floating action button from overlapping the paginator on mobile
 - Fixed an issue where the asset profile override (asset class and asset sub class) was not applied to the data enhancers when gathering asset profiles
 - Fixed a layout issue in the asset profile dialog of the admin control panel by truncating long titles
 
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/libs/ui/src/lib/fab/fab.component.scss b/libs/ui/src/lib/fab/fab.component.scss
index ab6353981..78cfe47e2 100644
--- a/libs/ui/src/lib/fab/fab.component.scss
+++ b/libs/ui/src/lib/fab/fab.component.scss
@@ -1,14 +1,32 @@
 :host {
-  bottom: calc(constant(safe-area-inset-bottom) + 2rem);
-  bottom: calc(env(safe-area-inset-bottom) + 2rem);
-  position: fixed;
-  right: 2rem;
-  z-index: 999;
+  display: block;
+
+  // Reserve space so a floating action button does not overlap trailing content
+  height: calc(constant(safe-area-inset-bottom) + 7rem);
+  height: calc(env(safe-area-inset-bottom) + 7rem);
+
+  @media (min-width: 576px) {
+    height: calc(constant(safe-area-inset-bottom) + 5rem);
+    height: calc(env(safe-area-inset-bottom) + 5rem);
+  }
+
+  .mat-mdc-fab {
+    bottom: calc(constant(safe-area-inset-bottom) + 2rem);
+    bottom: calc(env(safe-area-inset-bottom) + 2rem);
+    position: fixed;
+    right: 2rem;
+    z-index: 999;
+  }
 }
 
 :host-context(gf-page-tabs) {
   @media (max-width: 575.98px) {
-    bottom: calc(constant(safe-area-inset-bottom) + 5rem);
-    bottom: calc(env(safe-area-inset-bottom) + 5rem);
+    height: calc(constant(safe-area-inset-bottom) + 6rem);
+    height: calc(env(safe-area-inset-bottom) + 6rem);
+
+    .mat-mdc-fab {
+      bottom: calc(constant(safe-area-inset-bottom) + 5rem);
+      bottom: calc(env(safe-area-inset-bottom) + 5rem);
+    }
   }
 }