From fe1df9a9fbca725bbe1d1f997369725320a9d67d Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 18 Dec 2025 08:51:21 -0700
Subject: [PATCH] feat: make the new "+" appear centered on the home button

---
 src/views/HomeView.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 356a5d613e..c9064630e5 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -132,7 +132,7 @@ Raymer * @version 1.0.0 */
                 <button
                   v-if="isScrolled"
                   type="button"
-                  class="fixed bottom-10 p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
+                  class="fixed p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
                   :style="getButtonPosition()"
                   @click="openPersonDialog()"
                 >
@@ -1977,36 +1977,43 @@ export default class HomeView extends Vue {
   }
 
   /**
-   * Calculates the horizontal position for the button to align with house button center
+   * Calculates the position for the button to align with house button center (horizontally and vertically)
    */
   getButtonPosition() {
     const quickNav = document.getElementById("QuickNav");
     if (!quickNav) {
-      return { left: "1.5rem" }; // Fallback to left-6
+      return { left: "1.5rem", bottom: "2.5rem" }; // Fallback
     }
 
     const navList = quickNav.querySelector("ul");
     if (!navList) {
-      return { left: "1.5rem" };
+      return { left: "1.5rem", bottom: "2.5rem" };
     }
 
     // Get the first nav item (house button)
     const firstItem = navList.querySelector("li:first-child");
     if (!firstItem) {
-      return { left: "1.5rem" };
+      return { left: "1.5rem", bottom: "2.5rem" };
     }
 
     const itemRect = firstItem.getBoundingClientRect();
     const buttonWidth = 56; // w-14 = 3.5rem = 56px
+    const buttonHeight = 56; // h-14 = 3.5rem = 56px
 
-    // Calculate center of house button
-    const houseButtonCenter = itemRect.left + itemRect.width / 2;
+    // Calculate horizontal center of house button
+    const houseButtonCenterX = itemRect.left + itemRect.width / 2;
+    const buttonLeft = houseButtonCenterX - buttonWidth / 2;
 
-    // Position button so its center aligns with house button center
-    const buttonLeft = houseButtonCenter - buttonWidth / 2;
+    // Calculate vertical center of house button
+    const houseButtonCenterY = itemRect.top + itemRect.height / 2;
+    // Position button so its center aligns with house button center vertically
+    // bottom is measured from bottom of viewport, so: window.innerHeight - (centerY - buttonHeight/2)
+    const buttonBottom =
+      window.innerHeight - houseButtonCenterY - buttonHeight / 2;
 
     return {
       left: `${buttonLeft}px`,
+      bottom: `${buttonBottom}px`,
     };
   }
 }