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); - } - } } }