fix: fix pencil button location with bottom nav (#2222)

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>
 

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>

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