diff --git a/components/InvoiceIntake.tsx b/components/InvoiceIntake.tsx
index 8295a8a..657a776 100644
--- a/components/InvoiceIntake.tsx
+++ b/components/InvoiceIntake.tsx
@@ -154,7 +154,7 @@ export function AddInvoiceButton() {
       )}
 
       {open && (
-        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4">
+        <div className="fixed inset-0 z-[1250] flex items-end sm:items-center justify-center p-0 sm:p-4">
           {/* Backdrop */}
           <div
             className="absolute inset-0 bg-black/50 backdrop-blur-sm"
diff --git a/components/MachineCombobox.tsx b/components/MachineCombobox.tsx
index 7c1af7b..68da931 100644
--- a/components/MachineCombobox.tsx
+++ b/components/MachineCombobox.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
 import { useRouter } from "next/navigation";
 import { Loader2, AlertCircle, ChevronDown, Check, Search, X } from "lucide-react";
 
@@ -33,9 +34,32 @@ export function MachineCombobox({
   const boxRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
+  // The line table lives inside an overflow-x-auto scroll container, which CLIPS any
+  // absolutely-positioned child — an in-place dropdown is cut off by the table edge and
+  // by the card. Rendering into <body> with viewport coordinates is the only way out.
+  const [anchor, setAnchor] = useState<{ top: number; left: number; width: number } | null>(null);
 
   const selected = machines.find((m) => m.id === value) || null;
 
+  useLayoutEffect(() => {
+    if (!open || !inputRef.current) {
+      setAnchor(null);
+      return;
+    }
+    const measure = () => {
+      const r = inputRef.current?.getBoundingClientRect();
+      if (r) setAnchor({ top: r.bottom, left: r.left, width: r.width });
+    };
+    measure();
+    // Follow the page: the table scrolls, and so does the window.
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [open]);
+
   // Flattened, filtered list — the flat order is what the keyboard walks.
   const groups = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -60,6 +84,19 @@ export function MachineCombobox({
     };
   }, [machines, query]);
 
+  const menuWidth = 300;
+  // ~16px count strip + a "Not booked" row (if any) + 12px per row, capped.
+  const menuHeight = useMemo(() => {
+    const rows = groups.flat.length;
+    return 44 + (value ? 44 : 0) + 24 + Math.min(rows, 8) * 44 + 8;
+  }, [groups.flat.length, value]);
+
+  const flipUp = useMemo(() => {
+    if (typeof window === "undefined" || !anchor) return false;
+    return anchor.top + menuHeight + 8 > window.innerHeight && anchor.top - menuHeight - 8 > 8;
+  }, [anchor, menuHeight]);
+
+
   // Click away closes.
   useEffect(() => {
     if (!open) return;
@@ -178,8 +215,17 @@ export function MachineCombobox({
         )}
       </div>
 
-      {open && (
-        <div className="absolute z-30 left-0 top-full mt-1 w-full min-w-[280px] max-w-[340px] rounded-xl bg-white dark:bg-[#1a222b] border border-gray-200 dark:border-white/10 shadow-xl overflow-hidden">
+      {open && anchor && createPortal(
+        <div
+          style={{
+            position: "fixed",
+            top: flipUp ? Math.max(8, anchor.top - menuHeight - 6) : anchor.top + 4,
+            left: Math.min(anchor.left, window.innerWidth - menuWidth - 8),
+            width: Math.max(anchor.width, menuWidth),
+            zIndex: 1300,
+          }}
+          className="rounded-xl bg-white dark:bg-[#1a222b] border border-gray-200 dark:border-white/10 shadow-2xl overflow-hidden"
+        >
           <div className="px-3 py-2 text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-white/5">
             {groups.flat.length} of {machines.length} machines
             {!selected && " · type a code or name to narrow it"}
@@ -242,7 +288,8 @@ export function MachineCombobox({
               ))}
             </ul>
           )}
-        </div>
+        </div>,
+        document.body,
       )}
 
       {error && (
diff --git a/components/Toast.tsx b/components/Toast.tsx
index 9829c86..f50c799 100644
--- a/components/Toast.tsx
+++ b/components/Toast.tsx
@@ -12,6 +12,10 @@ import { CheckCircle2, Info, X } from "lucide-react";
 //
 // Announced politely rather than assertively — a confirmation is not urgent, and it
 // should not interrupt whatever a screen reader is currently saying.
+//
+// z-[1300], not a low value: the sticky header is z-[1100] (it has to clear Leaflet's
+// z-1000 control panes) and the mobile nav drawer is z-[1200]. Below those the toast
+// rendered behind the nav bar.
 export function Toast({
   message,
   detail,
@@ -44,7 +48,7 @@ export function Toast({
     <div
       role="status"
       aria-live="polite"
-      className={`pointer-events-none fixed z-[60] inset-x-3 sm:inset-x-auto sm:right-6 sm:w-auto sm:max-w-sm
+      className={`pointer-events-none fixed z-[1300] inset-x-3 sm:inset-x-auto sm:right-6 sm:w-auto sm:max-w-sm
         pt-[max(0.75rem,env(safe-area-inset-top))] sm:pt-0 sm:top-6
         transition-all duration-200 ease-out
         ${leaving ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`}