Lift mobile docks and FABs above the bottom tab bar.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/QuickCreate.vue

@@ -78,8 +78,18 @@ let dragMoved = false;
 let dragOffsetX = 0;
 let dragOffsetY = 0;
 
+function mobileTabbarPx(): number {
+  if (typeof window === 'undefined' || viewport.value.w > 900) return 0;
+  const bar = document.querySelector('.mobile-tabbar');
+  if (bar instanceof HTMLElement) {
+    const h = bar.getBoundingClientRect().height;
+    if (h > 0) return h;
+  }
+  return 64;
+}
+
 function defaultPos(): FabPos {
-  const extra = viewport.value.w <= 900 ? 64 : 0;
+  const extra = mobileTabbarPx();
   return {
     left: FAB_MARGIN_LEFT,
     top: Math.max(8, viewport.value.h - FAB_MARGIN_BOTTOM - extra - FAB_SIZE),
@@ -88,7 +98,7 @@ function defaultPos(): FabPos {
 
 function clampPos(pos: FabPos): FabPos {
   const margin = 8;
-  const bottomGap = viewport.value.w <= 900 ? 64 : 0;
+  const bottomGap = mobileTabbarPx();
   return {
     left: Math.min(Math.max(margin, pos.left), viewport.value.w - FAB_SIZE - margin),
     top: Math.min(

apps/web/src/styles/main.css

@@ -2,6 +2,8 @@
 @import "./tokens.css";
 
 :root {
+  --mobile-tabbar-h: 0px;
+
   /* Surface & Background */
   --bg: #f8fafc;
   --surface: #ffffff;
@@ -251,6 +253,10 @@ textarea {
 }
 
 @media (max-width: 900px) {
+  :root {
+    --mobile-tabbar-h: calc(3.65rem + env(safe-area-inset-bottom, 0px));
+  }
+
   h1 {
     font-size: clamp(1.35rem, 5vw, 1.75rem);
   }

apps/web/src/views/ActivityDetailView.vue

@@ -319,6 +319,7 @@ onMounted(load);
   margin: 0;
   display: grid;
   gap: 0.9rem;
+  padding-bottom: 5.5rem;
 }
 
 .nav {
@@ -572,7 +573,7 @@ dd {
 .dock {
   position: fixed;
   inset-inline: 0.85rem;
-  bottom: calc(0.55rem + env(safe-area-inset-bottom));
+  bottom: calc(0.55rem + var(--mobile-tabbar-h));
   display: grid;
   grid-template-columns: 1.15fr 1fr 1fr;
   gap: 0.5rem;
@@ -607,6 +608,10 @@ dd {
 }
 
 @media (min-width: 900px) {
+  .page {
+    padding-bottom: 0;
+  }
+
   .dock {
     position: sticky;
     inset-inline: auto;

apps/web/src/views/ActivityFormView.vue

@@ -661,6 +661,10 @@ watch([id, isNew], () => void load(), { immediate: true });
 </template>
 
 <style scoped>
+.crm-page:not(.embedded) {
+  padding-bottom: 5rem;
+}
+
 .crm-page.embedded {
   padding-bottom: 0;
 }
@@ -1142,7 +1146,7 @@ watch([id, isNew], () => void load(), { immediate: true });
 .mobile-save {
   position: fixed;
   inset-inline: 0.85rem;
-  bottom: calc(0.55rem + env(safe-area-inset-bottom));
+  bottom: calc(0.55rem + var(--mobile-tabbar-h));
   z-index: 8;
 }
 
@@ -1154,6 +1158,7 @@ watch([id, isNew], () => void load(), { immediate: true });
 }
 
 @media (min-width: 960px) {
+  .crm-page:not(.embedded),
   .page {
     padding-bottom: 1rem;
     gap: 1rem;

apps/web/src/views/DealFormView.vue

@@ -791,6 +791,7 @@ onMounted(load);
   width: 100%;
   max-width: 100%;
   min-width: 0;
+  padding-bottom: 5rem;
 }
 
 .page.embedded {
@@ -1391,7 +1392,7 @@ h1 {
 .mobile-save {
   position: fixed;
   inset-inline: 0.85rem;
-  bottom: calc(0.55rem + env(safe-area-inset-bottom));
+  bottom: calc(0.55rem + var(--mobile-tabbar-h));
   z-index: 8;
   display: grid;
   grid-template-columns: 1fr 1.2fr;

apps/web/src/views/InvoiceFormView.vue

@@ -2362,7 +2362,7 @@ h1 {
   align-items: center;
   gap: 0.65rem;
   position: sticky;
-  bottom: 0.5rem;
+  bottom: calc(0.5rem + var(--mobile-tabbar-h));
   padding: 0.35rem 0;
   background: linear-gradient(to top, #f8fafc 70%, transparent);
 }

apps/web/src/views/InvoicesView.vue

@@ -857,7 +857,7 @@ tbody tr:nth-child(even) { background: #fcfdff; }
 .page-btn.on { background: var(--teal); color: #fff; border-color: transparent; }
 
 .fab {
-  display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40;
+  display: none; position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + var(--mobile-tabbar-h)); z-index: 40;
   background: var(--teal); color: #fff; text-align: center; text-decoration: none;
   border-radius: var(--radius); padding: 0.9rem; font-weight: 600;
   box-shadow: 0 12px 28px rgba(13,148,136,.35);

apps/web/src/views/MessageAutomationsView.vue

@@ -2482,7 +2482,7 @@ textarea {
 
 .m-wiz-foot {
   position: sticky;
-  bottom: 0;
+  bottom: var(--mobile-tabbar-h);
   display: grid;
   grid-template-columns: 1.25fr 1fr;
   gap: 0.65rem;

apps/web/src/views/NotesView.vue

@@ -1710,7 +1710,7 @@ onBeforeUnmount(() => {
 .fab {
   position: fixed;
   inset-inline-end: 1.1rem;
-  bottom: 1.25rem;
+  bottom: calc(1.25rem + var(--mobile-tabbar-h));
   z-index: 40;
   width: 54px;
   height: 54px;
@@ -2147,6 +2147,10 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 860px) {
+  .notes-page {
+    padding-bottom: 5rem;
+  }
+
   .desktop-only {
     display: none !important;
   }

apps/web/src/views/PersonProfileView.vue

@@ -1658,7 +1658,7 @@ watch(() => route.query.tab, readTab, { immediate: true });
 .dock {
   position: fixed;
   inset-inline: 1.1rem;
-  bottom: calc(0.7rem + env(safe-area-inset-bottom));
+  bottom: calc(0.7rem + var(--mobile-tabbar-h));
   z-index: 12;
   display: flex;
   justify-content: space-between;
@@ -1709,6 +1709,12 @@ watch(() => route.query.tab, readTab, { immediate: true });
   cursor: not-allowed;
 }
 
+@media (max-width: 959px) {
+  .page {
+    padding-bottom: 6.5rem;
+  }
+}
+
 @media (min-width: 960px) {
   .page {
     padding-bottom: 1.2rem;

apps/web/src/views/PipelineBoardView.vue

@@ -658,7 +658,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
 .menu-pop {
   position: fixed;
   inset-inline-start: 1rem;
-  bottom: 5.5rem;
+  bottom: calc(var(--mobile-tabbar-h) + 1.75rem);
   z-index: 40;
   background: #fff;
   border: 1px solid var(--line);

apps/web/src/views/ProductsSettingsView.vue

@@ -743,7 +743,7 @@ tr:last-child td {
   display: none;
   position: fixed;
   left: 1.1rem;
-  bottom: 1.1rem;
+  bottom: calc(1.1rem + var(--mobile-tabbar-h));
   width: 56px;
   height: 56px;
   border-radius: 999px;

apps/web/src/views/ProfileView.vue

@@ -1420,7 +1420,7 @@ h1 {
   .dock {
     position: fixed;
     inset-inline: 0.85rem;
-    bottom: calc(0.55rem + env(safe-area-inset-bottom));
+    bottom: calc(0.55rem + var(--mobile-tabbar-h));
     width: auto;
   }
 

apps/web/src/views/ProjectBoardView.vue

@@ -671,7 +671,7 @@ onBeforeUnmount(() => {
 .menu-pop {
   position: fixed;
   inset-inline-start: 1rem;
-  bottom: 5.5rem;
+  bottom: calc(var(--mobile-tabbar-h) + 1.75rem);
   z-index: 40;
   background: #fff;
   border: 1px solid var(--line);

apps/web/src/views/SalesForecastView.vue

@@ -921,9 +921,9 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap;
 .sum-row.payable { color: var(--teal); font-weight: 600; border-bottom: 0; }
 .forecast-summary { padding: 1rem; }
 .mob-bottom {
-  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
+  position: fixed; left: 0; right: 0; bottom: var(--mobile-tabbar-h); z-index: 40;
   display: none; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center;
-  padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
+  padding: 0.65rem 0.85rem;
   background: #fff; border-top: 1px solid #eef2f7; box-shadow: 0 -8px 24px rgba(15,23,42,.06);
 }
 .fab {
@@ -948,6 +948,7 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap;
   .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 @media (max-width: 900px) {
+  .page { padding-bottom: 5.5rem; }
   .desk-only { display: none !important; }
   .mob-only, .mob-tabs, .mob-goals, .mob-forecast, .mob-bottom { display: flex; }
   .mob-goals, .mob-forecast, .mob-form-screen { display: grid; }

apps/web/src/views/TeamSettingsView.vue

@@ -1745,7 +1745,7 @@ textarea {
     min-height: 0;
     max-height: min(78dvh, 640px);
     border-radius: 22px 22px 0 0;
-    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
+    padding-bottom: 0.85rem;
     animation: sheet-up 0.22s ease;
   }