diff --git a/src/app/dashboard/financial/purchase-orders/[poId]/po-detail-view.tsx b/src/app/dashboard/financial/purchase-orders/[poId]/po-detail-view.tsx
index 7f33d83..49377e1 100644
--- a/src/app/dashboard/financial/purchase-orders/[poId]/po-detail-view.tsx
+++ b/src/app/dashboard/financial/purchase-orders/[poId]/po-detail-view.tsx
@@ -124,7 +124,11 @@ function amberTile(
       ? "text-blue-600 dark:text-blue-400"
       : "text-[#F2B165]";
   return (
-    <Card className="relative overflow-hidden border-border/60">
+    // `min-w-0`: without it, a grid item won't shrink below its content's
+    // intrinsic width — a wide, non-breaking-space-grouped number (e.g.
+    // "4 777,92 u") then grows the grid track past the column's share,
+    // pushing the whole page wider than the viewport at 2-up.
+    <Card className="relative min-w-0 overflow-hidden border-border/60">
       <span
         aria-hidden
         className={`absolute inset-y-0 left-0 w-1 bg-gradient-to-b ${strip}`}
@@ -857,7 +861,9 @@ function DeliveryNoteCard({
             </Badge>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        {/* flex-wrap: up to three buttons (review link, view slip,
+            verify) here would overflow a 375px screen in one row. */}
+        <div className="flex flex-wrap items-center gap-2">
           {dn.batchNoteId && (
             <Button asChild variant="outline" size="sm">
               <Link href={`/dashboard/financial/delivery-notes/document/${dn.batchNoteId}`}>
diff --git a/src/app/dashboard/plant/equipment/[vehicleId]/page.tsx b/src/app/dashboard/plant/equipment/[vehicleId]/page.tsx
index 7ddcd91..7ec8b1b 100644
--- a/src/app/dashboard/plant/equipment/[vehicleId]/page.tsx
+++ b/src/app/dashboard/plant/equipment/[vehicleId]/page.tsx
@@ -134,7 +134,8 @@ export default async function PlantDetailPage({
         title={vehicle.description}
         subtitle={`${vehicleProjectCode} · ${vehicle.fuel_limits || "No fuel limit set"}`}
         right={
-          <div className="flex items-center gap-2">
+          // flex-wrap: two labelled buttons here would overflow a 375px screen.
+          <div className="flex flex-wrap items-center gap-2">
             <MergeVehicleButton
               vehicleId={vehicleId}
               vehicleLabel={vehicle.description}
diff --git a/src/app/dashboard/plant/equipment/plant-view.tsx b/src/app/dashboard/plant/equipment/plant-view.tsx
index f79ba89..79d5ce3 100644
--- a/src/app/dashboard/plant/equipment/plant-view.tsx
+++ b/src/app/dashboard/plant/equipment/plant-view.tsx
@@ -264,7 +264,9 @@ export function PlantView({
         title={title}
         subtitle={subtitle}
         right={
-          <div className="flex items-center gap-2">
+          // flex-wrap: three items here would overflow a 375px screen
+          // in one row.
+          <div className="flex flex-wrap items-center gap-2">
             <a
               href="/api/plant-hours/template"
               className="inline-flex h-9 items-center gap-1 rounded-md border border-border bg-card px-3 text-sm hover:bg-muted"
diff --git a/src/app/dashboard/plant/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/plant/vehicles/[vehicleId]/page.tsx
index eda9b3b..cb3dc58 100644
--- a/src/app/dashboard/plant/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/plant/vehicles/[vehicleId]/page.tsx
@@ -179,7 +179,8 @@ export default async function VehicleDetailPage({
         title={vehicle.description}
         subtitle={`${vehicleProjectCode} · ${limitStr || "No fuel limit set"}`}
         right={
-          <div className="flex items-center gap-2">
+          // flex-wrap: two labelled buttons here would overflow a 375px screen.
+          <div className="flex flex-wrap items-center gap-2">
             <MergeVehicleButton
               vehicleId={vehicleId}
               vehicleLabel={vehicle.description}
diff --git a/src/app/dashboard/plant/vehicles/fuel-view.tsx b/src/app/dashboard/plant/vehicles/fuel-view.tsx
index 76a2cbe..b6051e2 100644
--- a/src/app/dashboard/plant/vehicles/fuel-view.tsx
+++ b/src/app/dashboard/plant/vehicles/fuel-view.tsx
@@ -330,7 +330,10 @@ export function FuelView({
         title={title}
         subtitle={subtitle}
         right={
-          <div className="flex items-center gap-2">
+          // flex-wrap: two labelled buttons here (plus the scope switcher
+          // and theme toggle already in Topbar) are wider than a 375px
+          // screen; without wrapping this pushed the whole page sideways.
+          <div className="flex flex-wrap items-center gap-2">
             <EditModeToggle
               editing={edit.editing}
               onToggle={handleToggle}
diff --git a/src/app/dashboard/sites/[id]/page.tsx b/src/app/dashboard/sites/[id]/page.tsx
index e5694e0..ec0f0a4 100644
--- a/src/app/dashboard/sites/[id]/page.tsx
+++ b/src/app/dashboard/sites/[id]/page.tsx
@@ -259,7 +259,8 @@ export default async function SiteDetailPage({
         title={site.name}
         subtitle={`${site.project_code} · ${site.duration || "—"}`}
         right={
-          <div className="flex items-center gap-2">
+          // flex-wrap: two labelled buttons here would overflow a 375px screen.
+          <div className="flex flex-wrap items-center gap-2">
             <EditSiteButton
               site={{
                 id: site.id,
diff --git a/src/app/dashboard/sites/sites-view.tsx b/src/app/dashboard/sites/sites-view.tsx
index 3b16e5f..169228d 100644
--- a/src/app/dashboard/sites/sites-view.tsx
+++ b/src/app/dashboard/sites/sites-view.tsx
@@ -179,8 +179,13 @@ function SiteCard({ site }: { site: SiteSummary }) {
         </div>
       </CardHeader>
       <CardContent className="space-y-4 pl-5">
-        {/* Contract + burn */}
-        <div className="grid grid-cols-3 gap-3">
+        {/* Contract + burn. `Intl.NumberFormat` inserts non-breaking
+            spaces in these currency strings (so "R 24 988 663" never
+            splits mid-amount), which means a wide value can't wrap onto
+            a second line — at 3-up it just overflows into the next
+            column. Stack to 1-up below `sm` where there's no room for
+            three currency columns; 3-up returns once there's space. */}
+        <div className="grid grid-cols-1 gap-1 sm:grid-cols-3 sm:gap-3">
           <Metric label="Contract" value={formatCurrency(site.contractValue)} />
           <Metric
             label="Spent"
@@ -262,7 +267,10 @@ function Metric({
   sub?: string;
 }) {
   return (
-    <div>
+    // `min-w-0`: without it, a grid item won't shrink below its content's
+    // natural width, so a wide currency value (e.g. "R 24 988 663") spills
+    // into the next column instead of wrapping at 375px.
+    <div className="min-w-0">
       <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
         {label}
       </p>
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index add375f..6ca7b0f 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -328,7 +328,12 @@ export function Topbar({ title, subtitle, right }: { title: string; subtitle?: s
             </React.Suspense>
           </div>
         </div>
-        <div className="flex shrink-0 items-center gap-2">
+        {/* flex-wrap: a page's `right` prop can carry more than one
+            labelled button (e.g. the vehicles page's "Edit descriptions"
+            + "Import fuel log"), which together with the scope dropdown
+            and theme toggle is wider than a 375px screen — without
+            wrapping, the overflow pushed the whole page sideways. */}
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
           <div className="hidden lg:block">
             <React.Suspense fallback={null}>
               <SiteScopeSwitcher variant="dropdown" />
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index e338b71..fd50fd9 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -34,7 +34,12 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-card p-6 shadow-xl rounded-xl",
+        // `max-h-[90dvh] overflow-y-auto`: a dialog taller than the
+        // viewport (long forms, big tables) used to extend off both the
+        // top and bottom on phones with no way to reach content or the
+        // close button — cap the height and let the content scroll
+        // internally instead.
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg max-h-[90dvh] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto border border-border bg-card p-6 shadow-xl rounded-xl",
         className
       )}
       {...props}