From 347dab4e29b3afbace8278c5125ecf78c7b5f1a2 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 21 Nov 2022 18:53:25 -0800
Subject: [PATCH] fix: fix pencil button location with bottom nav (#2222)

---
 src/build/template.html                                 | 1 +
 src/routes/_components/compose/ComposeStickyButton.html | 2 +-
 src/scss/variables.scss                                 | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/build/template.html b/src/build/template.html
index f904af0e..94f89588 100644
--- a/src/build/template.html
+++ b/src/build/template.html
@@ -39,6 +39,7 @@
       --main-content-pad-top: 0px;
       --main-content-pad-bottom: var(--main-content-pad-vertical);
       --toast-gap-bottom: var(--nav-total-height);
+      --fab-gap-top: 0px;
     }
   </style>
 
diff --git a/src/routes/_components/compose/ComposeStickyButton.html b/src/routes/_components/compose/ComposeStickyButton.html
index e5bf3cac..8362555a 100644
--- a/src/routes/_components/compose/ComposeStickyButton.html
+++ b/src/routes/_components/compose/ComposeStickyButton.html
@@ -25,7 +25,7 @@
 
   :global(.compose-box-button-sticky, .compose-box-button-fixed) {
     z-index: 5000;
-    top: calc(var(--nav-total-height));
+    top: calc(var(--fab-gap-top));
   }
 </style>
 <script>
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 9531287a..ad37a485 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -66,6 +66,7 @@
   --nav-top: 0px;
   --nav-bottom: initial;
   --toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
+  --fab-gap-top: var(--nav-total-height); // used to position the FAB (floating action button) below the top nav
 
   //
   // focus outline