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

---
 apps/client/src/styles.scss                   |  6 ----
 libs/ui/src/lib/fab/fab.component.scss        | 32 +++++++++++++++----
 .../lib/page-tabs/page-tabs.component.scss    | 11 -------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 09771a222..045de2eb6 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -495,12 +495,6 @@ 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/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);
+    }
   }
 }
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 aca2a1d94..0b377e57a 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
@@ -21,17 +21,6 @@
       @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);
-        }
-      }
     }
   }