From 834cc4d0e8889e085026fdd5260b31d9c0239bb4 Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <jakob.wennberg@arcim.io>
Date: Thu, 20 Aug 2026 10:03:52 +0200
Subject: [PATCH] fix(ui): kill horizontal overflow in dialogs and cut the
 worst modal copy (#1732)

* fix(dialogs): kill horizontal overflow in dialogs and cut the worst modal copy

Overflow hardening:
- DialogTitle/DialogDescription and SheetTitle/SheetDescription get
  break-words at the primitive, so long unbroken interpolated strings
  (emails, product names, org numbers) can no longer widen any dialog.
- AccountCombobox's non-flat dropdown is portaled to document.body with
  viewport-clamped geometry (new pure helper account-combobox-position.ts,
  unit-tested), the same fix info-tooltip.tsx applies to TooltipContent:
  the 34rem panel inside a scrollable DialogContent was the root cause of
  sideways-scrolling dialogs. Outside-click checks the portaled node,
  position tracks scroll/resize (capture phase), wheel/touchmove stop at
  the panel so react-remove-scroll's modal lock cannot block its scrolling,
  and DialogContent/SheetContent treat data-dialog-companion nodes as
  inside interactions so clicking the panel never dismisses the dialog.
  The flat variant is unchanged.
- StrikeLinesDialog/CorrectionEntryDialog line rows switch bare 1fr grid
  tracks to minmax(0,1fr) and wrap the sm:contents-promoted AccountCombobox
  in a min-w-0 cell (SendInvoiceDialog's pattern).
- New dialog-overflow-risk ratchet in no-new-antipatterns.mjs: bare fr
  tracks in dialog hosts, whitespace-nowrap inside DialogContent regions
  outside an allowlist, and unportaled >=20rem overlays; baselined at the
  post-fix 7 files.

Copy reduction (convention 7, MatchVoucherDialog precedent):
- New shared RattelseExplainer (HelpPopover) carries the "a posted
  verifikat cannot be edited directly" framing once; CorrectionEntryDialog,
  StrikeLinesDialog, RecordateEntryDialog and CorrectMetadataDialog drop
  their permanent inline explainer boxes and keep at most one sentence
  inline (hardcoded Swedish: verifikat surface).
- SendInvoiceDialog keeps the actual addresses inline and moves the fixed
  CC/BCC framing plus the extra-address rules behind a HelpPopover
  (recipient_additional_hint replaced by recipient_help_fixed and
  recipient_help_additional in both messages files).
- HelpPopover panels gain pointer-events-auto and the companion marker so
  they are actually interactive inside modal dialogs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(bookkeeping): mechanism-accurate rattelse copy and calmer dropdown repositioning

The shared RattelseExplainer claimed every rattelse is logged with who/when
in the verifikat's rattelsehistorik, which is only true for the inline
strike-and-replace track (StrikeLinesDialog, CorrectMetadataDialog). The
storno dialogs (CorrectionEntryDialog, RecordateEntryDialog) never write
that log: their BFL 5 kap 5 trail is the storno chain. The shared component
now keeps only the universally true framing sentence, and each dialog's
popover carries the trail sentence matching its own mechanism.

AccountCombobox's capture-phase scroll/resize handler now skips setState
when the recomputed position is shallow-equal to the current one
(isSameDropdownPosition in the pure position helper, unit-tested) and
ignores scroll events originating inside the portaled panel itself, so
scrolling the account list no longer churns re-renders.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 DECISIONS.md                                  |   1 +
 components/bookkeeping/AccountCombobox.tsx    | 281 +++++++++++++-----
 .../bookkeeping/CorrectMetadataDialog.tsx     |  36 ++-
 .../bookkeeping/CorrectionEntryDialog.tsx     |  74 +++--
 components/bookkeeping/RattelseExplainer.tsx  |  39 +++
 .../bookkeeping/RecordateEntryDialog.tsx      |  32 +-
 components/bookkeeping/StrikeLinesDialog.tsx  |  68 +++--
 .../account-combobox-position.test.ts         | 128 ++++++++
 .../bookkeeping/account-combobox-position.ts  |  92 ++++++
 components/invoices/SendInvoiceDialog.tsx     |  21 +-
 components/ui/dialog.tsx                      |  18 +-
 components/ui/help-popover.tsx                |   6 +-
 components/ui/sheet.tsx                       |  15 +-
 messages/en.json                              |   3 +-
 messages/sv.json                              |   3 +-
 scripts/checks/antipatterns-baseline.json     |  12 +
 scripts/checks/no-new-antipatterns.mjs        | 139 ++++++++-
 17 files changed, 799 insertions(+), 169 deletions(-)
 create mode 100644 components/bookkeeping/RattelseExplainer.tsx
 create mode 100644 components/bookkeeping/__tests__/account-combobox-position.test.ts
 create mode 100644 components/bookkeeping/account-combobox-position.ts

diff --git a/DECISIONS.md b/DECISIONS.md
index ba522693..a6e878d8 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -1085,3 +1085,4 @@ One line per decision: `[YYYY-MM-DD] <decision>: <why>`. Appended by agents and
 [2026-08-19] Bank reconciliation: ignored transactions are excluded from bank_transaction_total/difference (surfaced as separate count+sum) rather than keeping the old "what the bank moved" semantics: the ignore flag's dominant real-world use is feed duplicates (which never moved money and never get a ledger leg), so including them made is_reconciled unreachable after a correct dupe cleanup (observed: permanent 78 867 kr differens on a fully booked EF account). descriptionsBridge now strips ALL whitespace before the prefix compare (collapse-only still misses a dropped space); safe because char-filtering preserves prefix relations and the compare stays inside a (date,ore) bucket.
 [2026-08-19] Inline rättelse bank guard anchors to the linked bank amount, per account, not to the pre-state and not to the 19xx group net: a non-zero change on a 19xx/cash-ledger account is allowed iff the post-state net on that account equals the signed sum of the linked transactions resolved to it (once per transaction, split links by allocated_amount; NULL cash_account_id resolves to the primary cash account, then 1930). Per account rather than group so a wrong-bank-account booking (1930 vs 1940) stays a storno job: a group check would let the net drift between accounts and break per-account bank reconciliation. When no anchor resolves the old strict refusal stands. Reskontra sides (15xx/24xx) stay strictly net-preserving because their anchor is the payment row, not a bank amount.
 [2026-08-19] Import mapping step gets a bulk "Bekräfta alla föreslagna" for the VAT-treatment review gate, batching the per-row confirm semantics unchanged (defaults kept, rows marked reviewed): a Fortnox chart routinely puts 70+ class 3/4 accounts behind the gate and the one-click-per-row flow across 50-row pages was an observed live migration dead end (Boltonshield 2026-08-18, stuck at "50 kvar"). Rejected: auto-skipping review for accounts unused by the imported vouchers, because the chart rows are still created with the suggested treatment and a silently wrong default on a soon-used account is exactly what the review gate exists to catch.
+[2026-08-19] Dialog overflow hardening: Dialog/Sheet titles and descriptions get break-words at the primitive; AccountCombobox's non-flat dropdown is portaled to document.body with viewport-clamped geometry (same rationale as info-tooltip's TooltipContent portal, since DialogContent's overflow-y-auto otherwise grows a horizontal scrollbar around the 34rem panel); the four rattelse-family dialog explainers are unified behind one RattelseExplainer HelpPopover (convention 7, MatchVoucherDialog precedent) instead of four near-duplicate inline paragraphs; a dialog-overflow-risk ratchet in no-new-antipatterns.mjs keeps bare-1fr tracks, dialog whitespace-nowrap and unportaled wide overlays from coming back.
diff --git a/components/bookkeeping/AccountCombobox.tsx b/components/bookkeeping/AccountCombobox.tsx
index 448d7375..30bc4b27 100644
--- a/components/bookkeeping/AccountCombobox.tsx
+++ b/components/bookkeeping/AccountCombobox.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useRef, useEffect, useMemo, useCallback, useId } from 'react'
+import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, useId } from 'react'
+import { createPortal } from 'react-dom'
 import { Plus } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
@@ -11,8 +12,19 @@ import {
   type SearchableAccount,
   type AccountSearchItem,
 } from '@/lib/bookkeeping/account-search'
+import {
+  computeDropdownPosition,
+  isSameDropdownPosition,
+  type DropdownPosition,
+} from '@/components/bookkeeping/account-combobox-position'
 import type { BASAccount } from '@/types'
 
+// Shared by every portaled panel instance: only stops propagation so the
+// browser's default scrolling still runs on the panel itself.
+function stopScrollPropagation(e: Event) {
+  e.stopPropagation()
+}
+
 interface AccountComboboxProps {
   value: string
   accounts: BASAccount[]
@@ -59,7 +71,11 @@ export default function AccountCombobox({ value, accounts, onChange, onCommit, o
   const [highlightedIndex, setHighlightedIndex] = useState(0)
   const containerRef = useRef<HTMLDivElement>(null)
   const internalInputRef = useRef<HTMLInputElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement | null>(null)
+  // The portaled (non-flat) dropdown panel. It is not a DOM descendant of
+  // containerRef, so outside-click detection must check it separately.
+  const portalPanelRef = useRef<HTMLDivElement | null>(null)
+  const [dropdownPos, setDropdownPos] = useState<DropdownPosition | null>(null)
   const selectedNameId = useId()
   // Whether the user has typed or arrow-navigated since the field was focused.
   // Enter only selects the highlighted item after an actual interaction: a
@@ -129,10 +145,74 @@ export default function AccountCombobox({ value, accounts, onChange, onCommit, o
     }
   }, [highlightedIndex, isOpen])
 
+  // Keep the portaled (non-flat) dropdown glued to the trigger: measure off
+  // containerRef when it opens, and re-measure while anything scrolls or the
+  // window resizes underneath it. The capture-phase scroll listener also
+  // catches scrolling ancestors such as DialogContent's overflow-y-auto body.
+  const updateDropdownPosition = useCallback(() => {
+    if (flat || !containerRef.current) return
+    const rect = containerRef.current.getBoundingClientRect()
+    const next = computeDropdownPosition(
+      { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width },
+      { width: window.innerWidth, height: window.innerHeight },
+    )
+    // Bail out when nothing moved (e.g. scroll ticks that did not shift the
+    // anchor): returning the previous reference lets React skip the re-render.
+    setDropdownPos((prev) => (isSameDropdownPosition(prev, next) ? prev : next))
+  }, [flat])
+
+  useLayoutEffect(() => {
+    if (!isOpen || flat) return
+    updateDropdownPosition()
+    const handleScroll = (e: Event) => {
+      // Scrolling the portaled panel's own list never moves the anchor (the
+      // panel is position: fixed): repositioning on it would just churn state
+      // while the user scrolls the account list.
+      if (e.target instanceof Node && portalPanelRef.current?.contains(e.target)) return
+      updateDropdownPosition()
+    }
+    window.addEventListener('scroll', handleScroll, true)
+    window.addEventListener('resize', updateDropdownPosition)
+    return () => {
+      window.removeEventListener('scroll', handleScroll, true)
+      window.removeEventListener('resize', updateDropdownPosition)
+    }
+  }, [isOpen, flat, updateDropdownPosition])
+
+  // react-remove-scroll (active inside every modal dialog) preventDefaults
+  // wheel/touchmove events that reach document from outside the dialog's DOM
+  // tree, and the portaled panel lives outside that tree. Stopping the events
+  // at the panel lets the browser scroll it natively; overscroll-contain on
+  // the panel stops chained page scrolling at the list's edges.
+  const attachPortalPanel = useCallback((el: HTMLDivElement | null) => {
+    const prev = portalPanelRef.current
+    if (prev) {
+      prev.removeEventListener('wheel', stopScrollPropagation)
+      prev.removeEventListener('touchmove', stopScrollPropagation)
+    }
+    portalPanelRef.current = el
+    if (el) {
+      el.addEventListener('wheel', stopScrollPropagation)
+      el.addEventListener('touchmove', stopScrollPropagation)
+    }
+  }, [])
+
+  const attachPortalListPanel = useCallback((el: HTMLDivElement | null) => {
+    listRef.current = el
+    attachPortalPanel(el)
+  }, [attachPortalPanel])
+
   // Close dropdown when clicking/tapping outside
   useEffect(() => {
     function handleClickOutside(e: MouseEvent | TouchEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+      const target = e.target as Node
+      // The non-flat dropdown is portaled to document.body, so it is not a
+      // DOM descendant of containerRef: check the portaled panel too.
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(target) &&
+        !(portalPanelRef.current && portalPanelRef.current.contains(target))
+      ) {
         setIsOpen(false)
       }
     }
@@ -260,9 +340,96 @@ export default function AccountCombobox({ value, accounts, onChange, onCommit, o
 
   const showSelectedName = Boolean(selectedName && value && search === value)
 
-  // In flat mode the dropdown follows the trigger's width instead of forcing
-  // 34rem: inside a SettingsRow that fixed width would overflow the dialog.
-  const listWidthClass = flat ? 'w-full min-w-0' : 'min-w-[24rem] w-[max(100%,34rem)]'
+  // Flat mode keeps the dropdown as an absolute child that follows the
+  // trigger's width: inside a SettingsRow a fixed width would overflow the
+  // dialog. The non-flat dropdown is portaled to document.body with an
+  // explicit viewport-clamped geometry (computeDropdownPosition) instead, so
+  // a scrollable DialogContent can never clip it or grow a horizontal
+  // scrollbar around it (the fix info-tooltip.tsx already applies to
+  // TooltipContent, extended to this dropdown).
+  const flatListWidthClass = 'w-full min-w-0'
+
+  const portalPanelStyle: React.CSSProperties | undefined = dropdownPos
+    ? {
+        left: dropdownPos.left,
+        width: dropdownPos.width,
+        maxHeight: dropdownPos.maxHeight,
+        ...(dropdownPos.top !== undefined
+          ? { top: dropdownPos.top }
+          : { bottom: dropdownPos.bottom }),
+      }
+    : undefined
+
+  // data-dialog-companion: DialogContent/SheetContent treat a pointerdown
+  // inside a node carrying this attribute as an inside interaction, so
+  // clicking the portaled panel never dismisses the dialog hosting it.
+  const listPanelContent = groupedAccounts.map((group) => (
+    <div key={group.className}>
+      <div className="sticky top-0 px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted border-b border-input">
+        {group.className}
+      </div>
+      {group.accounts.map((item) => {
+        const flatIndex = flatList.indexOf(item)
+        const isHighlighted = flatIndex === highlightedIndex
+        return (
+          <button
+            key={item.account_number}
+            type="button"
+            data-highlighted={isHighlighted}
+            className={`w-full text-left px-2 py-1.5 text-sm cursor-pointer flex items-baseline gap-2 ${
+              isHighlighted ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
+            }`}
+            onMouseDown={(e) => {
+              e.preventDefault()
+              selectAccount(item.account_number)
+            }}
+            onMouseEnter={() => setHighlightedIndex(flatIndex)}
+          >
+            <span className={`font-mono shrink-0 ${item.isActive ? '' : 'text-muted-foreground'}`}>
+              {item.account_number}
+            </span>
+            <span className="flex-1 min-w-0 break-words">{item.account_name}</span>
+            {!item.isActive && (
+              <span className="shrink-0 self-center text-[11px] text-muted-foreground whitespace-nowrap">
+                {notActivatedLabel}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  ))
+
+  const emptyPanelContent = (
+    <>
+      <p className="text-sm text-muted-foreground">
+        Hittade inget konto som matchar.
+      </p>
+      {/^\d{4}$/.test(search.trim()) ? (
+        <p className="text-xs text-muted-foreground mt-1">
+          Om det är ett giltigt BAS-konto aktiveras det när du bokför.
+        </p>
+      ) : (
+        <p className="text-xs text-muted-foreground mt-1">
+          Kontot kan behöva aktiveras i din kontoplan.
+        </p>
+      )}
+      {onCreateAccount && (
+        <button
+          type="button"
+          className="mt-2 flex w-full items-center gap-2 rounded-sm border border-input bg-card px-2 py-1.5 text-left text-sm hover:bg-muted/50"
+          onMouseDown={(e) => {
+            e.preventDefault()
+            setIsOpen(false)
+            onCreateAccount(search.trim())
+          }}
+        >
+          <Plus className="h-3.5 w-3.5 shrink-0" />
+          <span className="truncate">Skapa konto &quot;{search.trim()}&quot;</span>
+        </button>
+      )}
+    </>
+  )
 
   const triggerProps = {
     ref: setInputRef,
@@ -297,89 +464,55 @@ export default function AccountCombobox({ value, accounts, onChange, onCommit, o
       ) : null}
 
       {/* Dropdown */}
-      {isOpen && !disabled && flatList.length > 0 && (
+      {isOpen && !disabled && flatList.length > 0 && (flat ? (
         <div
           ref={listRef}
           className={cn(
             'absolute z-50 top-full left-0 mt-1 max-h-[300px] overflow-y-auto rounded-lg border border-input bg-card shadow-md',
-            listWidthClass,
+            flatListWidthClass,
           )}
         >
-          {groupedAccounts.map((group) => (
-            <div key={group.className}>
-              <div className="sticky top-0 px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted border-b border-input">
-                {group.className}
-              </div>
-              {group.accounts.map((item) => {
-                const flatIndex = flatList.indexOf(item)
-                const isHighlighted = flatIndex === highlightedIndex
-                return (
-                  <button
-                    key={item.account_number}
-                    type="button"
-                    data-highlighted={isHighlighted}
-                    className={`w-full text-left px-2 py-1.5 text-sm cursor-pointer flex items-baseline gap-2 ${
-                      isHighlighted ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50'
-                    }`}
-                    onMouseDown={(e) => {
-                      e.preventDefault()
-                      selectAccount(item.account_number)
-                    }}
-                    onMouseEnter={() => setHighlightedIndex(flatIndex)}
-                  >
-                    <span className={`font-mono shrink-0 ${item.isActive ? '' : 'text-muted-foreground'}`}>
-                      {item.account_number}
-                    </span>
-                    <span className="flex-1 min-w-0 break-words">{item.account_name}</span>
-                    {!item.isActive && (
-                      <span className="shrink-0 self-center text-[11px] text-muted-foreground whitespace-nowrap">
-                        {notActivatedLabel}
-                      </span>
-                    )}
-                  </button>
-                )
-              })}
-            </div>
-          ))}
+          {listPanelContent}
         </div>
-      )}
+      ) : (
+        dropdownPos &&
+        createPortal(
+          <div
+            ref={attachPortalListPanel}
+            data-dialog-companion=""
+            className="fixed z-50 overflow-y-auto overscroll-contain pointer-events-auto rounded-lg border border-input bg-card shadow-md"
+            style={portalPanelStyle}
+          >
+            {listPanelContent}
+          </div>,
+          document.body,
+        )
+      ))}
 
       {/* Empty state */}
-      {isOpen && !disabled && search.trim() && flatList.length === 0 && (
+      {isOpen && !disabled && search.trim() && flatList.length === 0 && (flat ? (
         <div
           className={cn(
             'absolute z-50 top-full left-0 mt-1 rounded-lg border border-input bg-card shadow-md p-3',
-            listWidthClass,
+            flatListWidthClass,
           )}
         >
-          <p className="text-sm text-muted-foreground">
-            Hittade inget konto som matchar.
-          </p>
-          {/^\d{4}$/.test(search.trim()) ? (
-            <p className="text-xs text-muted-foreground mt-1">
-              Om det är ett giltigt BAS-konto aktiveras det när du bokför.
-            </p>
-          ) : (
-            <p className="text-xs text-muted-foreground mt-1">
-              Kontot kan behöva aktiveras i din kontoplan.
-            </p>
-          )}
-          {onCreateAccount && (
-            <button
-              type="button"
-              className="mt-2 flex w-full items-center gap-2 rounded-sm border border-input bg-card px-2 py-1.5 text-left text-sm hover:bg-muted/50"
-              onMouseDown={(e) => {
-                e.preventDefault()
-                setIsOpen(false)
-                onCreateAccount(search.trim())
-              }}
-            >
-              <Plus className="h-3.5 w-3.5 shrink-0" />
-              <span className="truncate">Skapa konto &quot;{search.trim()}&quot;</span>
-            </button>
-          )}
+          {emptyPanelContent}
         </div>
-      )}
+      ) : (
+        dropdownPos &&
+        createPortal(
+          <div
+            ref={attachPortalPanel}
+            data-dialog-companion=""
+            className="fixed z-50 overflow-y-auto overscroll-contain pointer-events-auto rounded-lg border border-input bg-card p-3 shadow-md"
+            style={portalPanelStyle}
+          >
+            {emptyPanelContent}
+          </div>,
+          document.body,
+        )
+      ))}
     </div>
   )
 }
diff --git a/components/bookkeeping/CorrectMetadataDialog.tsx b/components/bookkeeping/CorrectMetadataDialog.tsx
index 296ddce8..f768923d 100644
--- a/components/bookkeeping/CorrectMetadataDialog.tsx
+++ b/components/bookkeeping/CorrectMetadataDialog.tsx
@@ -6,9 +6,11 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
   DialogFooter,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
+import RattelseExplainer from '@/components/bookkeeping/RattelseExplainer'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { useToast } from '@/components/ui/use-toast'
@@ -88,19 +90,31 @@ export default function CorrectMetadataDialog({ entry, open, onOpenChange, onCor
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Ändra text eller datum</DialogTitle>
+          {/* Convention 7: the how-it-works copy lives behind the "?", not in
+              the dialog flow. */}
+          <div className="flex items-center gap-2">
+            <DialogTitle>Ändra text eller datum</DialogTitle>
+            <RattelseExplainer>
+              <p>
+                Verifikationstexten och datumet kan rättas här utan
+                ändringsverifikation.
+              </p>
+              <p>
+                Varje rättelse loggas med vem och när, och det ursprungliga
+                innehållet förblir synligt i verifikatets rättelsehistorik.
+              </p>
+              <p>
+                Om månaden redan är momsdeklarerad kan en datumflytt påverka
+                den inlämnade deklarationen.
+              </p>
+            </RattelseExplainer>
+          </div>
+          <DialogDescription>
+            Datumet kan bara flyttas inom samma bokföringsperiod: använd
+            &quot;Flytta till annat datum&quot; för att byta period.
+          </DialogDescription>
         </DialogHeader>
 
-        <div className="rounded-lg bg-muted/50 border p-3 text-sm text-muted-foreground">
-          <p>
-            Verifikationstexten och datumet kan rättas utan ändringsverifikation. Rättelsen loggas
-            med vem och när, och det gamla värdet förblir synligt i rättelsehistoriken. Datumet kan
-            bara flyttas inom samma bokföringsperiod: använd &quot;Flytta till annat datum&quot; för att
-            byta period. Om månaden redan är momsdeklarerad kan en datumflytt påverka den inlämnade
-            deklarationen.
-          </p>
-        </div>
-
         <div className="space-y-4">
           <div className="space-y-1">
             <Label htmlFor="rattelse-description">Verifikationstext</Label>
diff --git a/components/bookkeeping/CorrectionEntryDialog.tsx b/components/bookkeeping/CorrectionEntryDialog.tsx
index bdb5964e..68db6266 100644
--- a/components/bookkeeping/CorrectionEntryDialog.tsx
+++ b/components/bookkeeping/CorrectionEntryDialog.tsx
@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
+import RattelseExplainer from '@/components/bookkeeping/RattelseExplainer'
 import { AddAccountDialog } from '@/components/bookkeeping/AddAccountDialog'
 import CorrectionPreview from '@/components/bookkeeping/CorrectionPreview'
 import {
@@ -264,22 +265,31 @@ export default function CorrectionEntryDialog({ entry, open, onOpenChange, onCor
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-3xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Skapa ändringsverifikation</DialogTitle>
+          {/* Convention 7: the how-it-works copy lives behind the "?", not in
+              the dialog flow. */}
+          <div className="flex items-center gap-2">
+            <DialogTitle>Skapa ändringsverifikation</DialogTitle>
+            <RattelseExplainer>
+              <p>
+                Här skapas automatiskt en stornoverifikation som nollställer
+                originalet och en ny verifikation med dina rättade uppgifter.
+                Rättelsen bokförs i samma räkenskapsperiod som originalet: du
+                hittar den under originalets räkenskapsår.
+              </p>
+              <p>
+                Spårbarheten ligger i stornokedjan: originalet,
+                stornoverifikationen och ändringsverifikationen förblir synliga
+                i bokföringen och länkade till varandra.
+              </p>
+              <p>
+                Tar du bort ett konto ur de rättade raderna nollställs det
+                (stornon återför det). Vill du bara återföra hela verifikatet
+                utan att ersätta det, använd Återför (storno) istället.
+              </p>
+            </RattelseExplainer>
+          </div>
         </DialogHeader>
 
-        {/* Storno explanation */}
-        <div className="rounded-lg bg-muted/50 border p-3 text-sm text-muted-foreground">
-          <p className="font-medium text-foreground mb-1">Hur fungerar en ändringsverifikation?</p>
-          <p>En bokförd verifikation kan inte ändras direkt. Istället skapas automatiskt:</p>
-          <ol className="list-decimal list-inside mt-1 space-y-0.5">
-            <li>En <strong>stornoverifikation</strong> som nollställer den ursprungliga</li>
-            <li>En ny verifikation med dina rättade uppgifter</li>
-          </ol>
-          <p className="mt-2">
-            Rättelsen bokförs i samma räkenskapsperiod som originalet: du hittar den under originalets räkenskapsår.
-          </p>
-        </div>
-
         {/* Original entry metadata: lines live inside CorrectionPreview below */}
         <div className="space-y-1">
           <div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
@@ -318,9 +328,7 @@ export default function CorrectionEntryDialog({ entry, open, onOpenChange, onCor
           <div className="space-y-1">
             <p className="text-sm font-medium">Rättade rader</p>
             <p className="text-xs text-muted-foreground">
-              Det här är hela den nya verifikationen: alla konton som ska finnas kvar måste stå
-              kvar. Tar du bort ett konto nollställs det (stornon återför det). Vill du bara återföra
-              hela verifikatet utan att ersätta det, använd Återför (storno) istället.
+              Det här är hela den nya verifikationen: alla konton som ska finnas kvar måste stå kvar.
             </p>
           </div>
 
@@ -340,19 +348,25 @@ export default function CorrectionEntryDialog({ entry, open, onOpenChange, onCor
 
           <div className="space-y-2">
             {lines.map((line, index) => (
-              <div key={index} className="space-y-2 sm:space-y-0 sm:grid sm:grid-cols-[1fr_1fr_120px_120px_auto] sm:gap-2 sm:items-start border-b sm:border-0 pb-3 sm:pb-0 last:border-0">
-                <div className="grid grid-cols-[1fr_auto] sm:contents gap-2">
-                  <AccountCombobox
-                    value={line.account_number}
-                    accounts={activeAccounts}
-                    catalog={selectableCatalog}
-                    onChange={(v) => updateLineAccount(index, v)}
-                    onCreateAccount={(prefill) => {
-                      setCreatingAccountForLine(index)
-                      setCreateAccountPrefill(prefill)
-                    }}
-                    disabled={accountsStatus !== 'ready'}
-                  />
+              <div key={index} className="space-y-2 sm:space-y-0 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_120px_120px_auto] sm:gap-2 sm:items-start border-b sm:border-0 pb-3 sm:pb-0 last:border-0">
+                <div className="grid grid-cols-[minmax(0,1fr)_auto] sm:contents gap-2">
+                  {/* min-w-0: at sm: the sm:contents wrapper promotes this cell
+                      to a direct grid item; without it the combobox refuses to
+                      shrink below its content and overflows the dialog (same
+                      pattern as SendInvoiceDialog's desktop rows). */}
+                  <div className="min-w-0">
+                    <AccountCombobox
+                      value={line.account_number}
+                      accounts={activeAccounts}
+                      catalog={selectableCatalog}
+                      onChange={(v) => updateLineAccount(index, v)}
+                      onCreateAccount={(prefill) => {
+                        setCreatingAccountForLine(index)
+                        setCreateAccountPrefill(prefill)
+                      }}
+                      disabled={accountsStatus !== 'ready'}
+                    />
+                  </div>
                   <Button
                     variant="ghost"
                     size="icon"
diff --git a/components/bookkeeping/RattelseExplainer.tsx b/components/bookkeeping/RattelseExplainer.tsx
new file mode 100644
index 00000000..eb31c8af
--- /dev/null
+++ b/components/bookkeeping/RattelseExplainer.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { HelpPopover } from '@/components/ui/help-popover'
+
+interface RattelseExplainerProps {
+  /** Per-dialog specifics, rendered after the shared framing paragraph. */
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Shared "?" help for the rättelse family of dialogs (CorrectionEntryDialog,
+ * StrikeLinesDialog, RecordateEntryDialog, CorrectMetadataDialog): one place
+ * for the "a posted verifikat cannot be edited directly" framing, so the four
+ * dialogs stop maintaining near-duplicate inline paragraphs. Rendered next to
+ * the DialogTitle per UI-migration convention 7 (help lives behind a "?",
+ * not in the dialog flow: see MatchVoucherDialog). Stays Swedish
+ * (verifikat surface, .claude/rules/i18n.md).
+ *
+ * Only the universally true framing lives here. The audit-trail sentence is
+ * mechanism-specific (BFL 5 kap 5 §: two distinct correction tracks) and must
+ * come from each dialog's children: the inline strike-and-replace dialogs
+ * (StrikeLinesDialog, CorrectMetadataDialog) write the who/when
+ * rättelsehistorik log, while the storno dialogs (CorrectionEntryDialog,
+ * RecordateEntryDialog) never touch that log: their trail is the storno chain
+ * of linked verifikat. Claiming the rättelsehistorik here would be false for
+ * the storno paths.
+ */
+export default function RattelseExplainer({ children, className }: RattelseExplainerProps) {
+  return (
+    <HelpPopover className={className}>
+      <p>
+        En bokförd verifikation kan inte ändras direkt: enligt bokföringslagen
+        måste varje rättelse vara spårbar i efterhand.
+      </p>
+      <div className="mt-2 space-y-2">{children}</div>
+    </HelpPopover>
+  )
+}
diff --git a/components/bookkeeping/RecordateEntryDialog.tsx b/components/bookkeeping/RecordateEntryDialog.tsx
index 7f6baf77..00890a52 100644
--- a/components/bookkeeping/RecordateEntryDialog.tsx
+++ b/components/bookkeeping/RecordateEntryDialog.tsx
@@ -13,6 +13,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
+import RattelseExplainer from '@/components/bookkeeping/RattelseExplainer'
 import { useToast } from '@/components/ui/use-toast'
 import { getErrorMessage } from '@/lib/errors/get-error-message'
 import { AlertTriangle, Lock, ArrowRight } from 'lucide-react'
@@ -160,22 +161,25 @@ export default function RecordateEntryDialog({ entry, open, onOpenChange, onMove
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Rätta datum</DialogTitle>
+          {/* Convention 7: the how-it-works copy lives behind the "?", not in
+              the dialog flow. */}
+          <div className="flex items-center gap-2">
+            <DialogTitle>Rätta datum</DialogTitle>
+            <RattelseExplainer>
+              <p>
+                Raderna behålls oförändrade: en stornoverifikation nollställer
+                originalet i sin period, och en ny verifikation bokförs med
+                samma rader på det nya datumet.
+              </p>
+              <p>
+                Spårbarheten ligger i stornokedjan: originalet,
+                stornoverifikationen och den nya verifikationen förblir synliga
+                i bokföringen och länkade till varandra.
+              </p>
+            </RattelseExplainer>
+          </div>
         </DialogHeader>
 
-        {/* Explanation */}
-        <div className="rounded-lg bg-muted/50 border p-3 text-sm text-muted-foreground">
-          <p className="font-medium text-foreground mb-1">Flytta verifikationen till rätt datum</p>
-          <p>
-            En bokförd verifikation kan inte ändras direkt. Raderna behålls oförändrade: istället
-            skapas automatiskt:
-          </p>
-          <ol className="list-decimal list-inside mt-1 space-y-0.5">
-            <li>En <strong>stornoverifikation</strong> som nollställer originalet i sin period</li>
-            <li>En ny verifikation med samma rader, bokförd på det nya datumet</li>
-          </ol>
-        </div>
-
         {/* Original */}
         <div className="space-y-1">
           <div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
diff --git a/components/bookkeeping/StrikeLinesDialog.tsx b/components/bookkeeping/StrikeLinesDialog.tsx
index 7ad48bbe..e7b7185d 100644
--- a/components/bookkeeping/StrikeLinesDialog.tsx
+++ b/components/bookkeeping/StrikeLinesDialog.tsx
@@ -7,12 +7,14 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
   DialogFooter,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Checkbox } from '@/components/ui/checkbox'
 import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
+import RattelseExplainer from '@/components/bookkeeping/RattelseExplainer'
 import { AddAccountDialog } from '@/components/bookkeeping/AddAccountDialog'
 import { AccountNumber } from '@/components/ui/account-number'
 import { useToast } from '@/components/ui/use-toast'
@@ -220,19 +222,31 @@ export default function StrikeLinesDialog({ entry, open, onOpenChange, onCorrect
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-3xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Stryk rader i verifikatet</DialogTitle>
+          {/* Convention 7: the how-it-works copy lives behind the "?", not in
+              the dialog flow. */}
+          <div className="flex items-center gap-2">
+            <DialogTitle>Stryk rader i verifikatet</DialogTitle>
+            <RattelseExplainer>
+              <p>
+                Här stryks felaktiga rader och ersätts direkt i samma verifikat,
+                utan ändringsverifikation. Det fungerar bara i öppna, olåsta
+                perioder.
+              </p>
+              <p>
+                Varje rättelse loggas med vem och när, och de ursprungliga
+                raderna förblir synliga i verifikatets rättelsehistorik.
+              </p>
+              <p>
+                Om månaden redan är momsdeklarerad kan en ändring av momskonton
+                påverka den inlämnade deklarationen.
+              </p>
+            </RattelseExplainer>
+          </div>
+          <DialogDescription>
+            De strukna raderna förblir synliga (överstrukna) i verifikatet.
+          </DialogDescription>
         </DialogHeader>
 
-        <div className="rounded-lg bg-muted/50 border p-3 text-sm text-muted-foreground">
-          <p className="font-medium text-foreground mb-1">Rättelse i samma verifikat</p>
-          <p>
-            Felaktiga rader stryks och ersätts direkt i verifikatet, utan ändringsverifikation.
-            De strukna raderna förblir synliga (överstrukna) och rättelsen loggas med vem och när,
-            enligt bokföringslagen. Fungerar bara i öppna, olåsta perioder. Om månaden redan är
-            momsdeklarerad kan en ändring av momskonton påverka den inlämnade deklarationen.
-          </p>
-        </div>
-
         {/* Original lines with strike checkboxes */}
         <div className="space-y-1">
           <p className="text-sm font-medium">Markera rader som ska strykas</p>
@@ -295,19 +309,25 @@ export default function StrikeLinesDialog({ entry, open, onOpenChange, onCorrect
 
           <div className="space-y-2">
             {newLines.map((line, index) => (
-              <div key={index} className="space-y-2 sm:space-y-0 sm:grid sm:grid-cols-[1fr_1fr_120px_120px_auto] sm:gap-2 sm:items-start border-b sm:border-0 pb-3 sm:pb-0 last:border-0">
-                <div className="grid grid-cols-[1fr_auto] sm:contents gap-2">
-                  <AccountCombobox
-                    value={line.account_number}
-                    accounts={activeAccounts}
-                    catalog={selectableCatalog}
-                    onChange={(v) => updateNewLineAccount(index, v)}
-                    onCreateAccount={(prefill) => {
-                      setCreatingAccountForLine(index)
-                      setCreateAccountPrefill(prefill)
-                    }}
-                    disabled={accountsStatus !== 'ready'}
-                  />
+              <div key={index} className="space-y-2 sm:space-y-0 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_120px_120px_auto] sm:gap-2 sm:items-start border-b sm:border-0 pb-3 sm:pb-0 last:border-0">
+                <div className="grid grid-cols-[minmax(0,1fr)_auto] sm:contents gap-2">
+                  {/* min-w-0: at sm: the sm:contents wrapper promotes this cell
+                      to a direct grid item; without it the combobox refuses to
+                      shrink below its content and overflows the dialog (same
+                      pattern as SendInvoiceDialog's desktop rows). */}
+                  <div className="min-w-0">
+                    <AccountCombobox
+                      value={line.account_number}
+                      accounts={activeAccounts}
+                      catalog={selectableCatalog}
+                      onChange={(v) => updateNewLineAccount(index, v)}
+                      onCreateAccount={(prefill) => {
+                        setCreatingAccountForLine(index)
+                        setCreateAccountPrefill(prefill)
+                      }}
+                      disabled={accountsStatus !== 'ready'}
+                    />
+                  </div>
                   <Button
                     variant="ghost"
                     size="icon"
diff --git a/components/bookkeeping/__tests__/account-combobox-position.test.ts b/components/bookkeeping/__tests__/account-combobox-position.test.ts
new file mode 100644
index 00000000..749d6f98
--- /dev/null
+++ b/components/bookkeeping/__tests__/account-combobox-position.test.ts
@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest'
+import {
+  computeDropdownPosition,
+  isSameDropdownPosition,
+  DROPDOWN_PREFERRED_WIDTH,
+  DROPDOWN_VIEWPORT_MARGIN,
+  DROPDOWN_ANCHOR_GAP,
+  DROPDOWN_MAX_HEIGHT,
+} from '../account-combobox-position'
+
+const desktop = { width: 1440, height: 900 }
+
+describe('computeDropdownPosition', () => {
+  it('opens below the anchor at the preferred width when there is room', () => {
+    const pos = computeDropdownPosition(
+      { top: 200, bottom: 232, left: 300, width: 160 },
+      desktop,
+    )
+    expect(pos.top).toBe(232 + DROPDOWN_ANCHOR_GAP)
+    expect(pos.bottom).toBeUndefined()
+    expect(pos.left).toBe(300)
+    expect(pos.width).toBe(DROPDOWN_PREFERRED_WIDTH)
+    expect(pos.maxHeight).toBe(DROPDOWN_MAX_HEIGHT)
+  })
+
+  it('keeps the anchor width when the trigger is wider than the preferred width', () => {
+    const pos = computeDropdownPosition(
+      { top: 200, bottom: 232, left: 100, width: 700 },
+      desktop,
+    )
+    expect(pos.width).toBe(700)
+  })
+
+  it('clamps left so the panel never crosses the right viewport edge', () => {
+    const pos = computeDropdownPosition(
+      { top: 200, bottom: 232, left: 1200, width: 160 },
+      desktop,
+    )
+    expect(pos.left + pos.width).toBe(desktop.width - DROPDOWN_VIEWPORT_MARGIN)
+  })
+
+  it('never puts the panel past the left margin', () => {
+    const pos = computeDropdownPosition(
+      { top: 200, bottom: 232, left: 2, width: 160 },
+      desktop,
+    )
+    expect(pos.left).toBe(DROPDOWN_VIEWPORT_MARGIN)
+  })
+
+  it('shrinks to the viewport on a narrow (mobile) screen', () => {
+    const mobile = { width: 375, height: 700 }
+    const pos = computeDropdownPosition(
+      { top: 100, bottom: 140, left: 16, width: 200 },
+      mobile,
+    )
+    expect(pos.width).toBe(375 - DROPDOWN_VIEWPORT_MARGIN * 2)
+    expect(pos.left).toBe(DROPDOWN_VIEWPORT_MARGIN)
+  })
+
+  it('caps maxHeight to the space below the anchor', () => {
+    const pos = computeDropdownPosition(
+      { top: 650, bottom: 682, left: 300, width: 160 },
+      desktop,
+    )
+    expect(pos.top).toBe(682 + DROPDOWN_ANCHOR_GAP)
+    expect(pos.maxHeight).toBe(
+      desktop.height - 682 - DROPDOWN_ANCHOR_GAP - DROPDOWN_VIEWPORT_MARGIN,
+    )
+  })
+
+  it('flips above the anchor when the space below is too small', () => {
+    const pos = computeDropdownPosition(
+      { top: 800, bottom: 832, left: 300, width: 160 },
+      desktop,
+    )
+    expect(pos.top).toBeUndefined()
+    expect(pos.bottom).toBe(desktop.height - 800 + DROPDOWN_ANCHOR_GAP)
+    expect(pos.maxHeight).toBe(DROPDOWN_MAX_HEIGHT)
+  })
+
+  it('stays below when the space above is even smaller than below', () => {
+    const shortViewport = { width: 1440, height: 220 }
+    const pos = computeDropdownPosition(
+      { top: 40, bottom: 72, left: 300, width: 160 },
+      shortViewport,
+    )
+    expect(pos.top).toBe(72 + DROPDOWN_ANCHOR_GAP)
+    // Cramped viewport: the height floor keeps the list usable and scrollable.
+    expect(pos.maxHeight).toBeGreaterThanOrEqual(96)
+  })
+})
+
+describe('isSameDropdownPosition', () => {
+  const anchor = { top: 200, bottom: 232, left: 300, width: 160 }
+
+  it('is false against null (no previous position)', () => {
+    expect(isSameDropdownPosition(null, computeDropdownPosition(anchor, desktop))).toBe(false)
+  })
+
+  it('is true for two computations off an unmoved anchor', () => {
+    const a = computeDropdownPosition(anchor, desktop)
+    const b = computeDropdownPosition({ ...anchor }, desktop)
+    expect(isSameDropdownPosition(a, b)).toBe(true)
+  })
+
+  it.each([
+    ['left', { left: 301 }],
+    ['width', { width: 545 }],
+    ['maxHeight', { maxHeight: 299 }],
+    ['top', { top: 237 }],
+  ] as const)('is false when %s differs', (_field, patch) => {
+    const a = computeDropdownPosition(anchor, desktop)
+    expect(isSameDropdownPosition(a, { ...a, ...patch })).toBe(false)
+  })
+
+  it('distinguishes open-below from open-above at the same coordinates', () => {
+    const below = computeDropdownPosition(anchor, desktop)
+    const above = computeDropdownPosition({ top: 800, bottom: 832, left: 300, width: 160 }, desktop)
+    expect(below.top).toBeDefined()
+    expect(above.bottom).toBeDefined()
+    expect(isSameDropdownPosition(below, above)).toBe(false)
+    // Flipping sides toggles which of top/bottom is undefined: the guard must
+    // compare both, not just the defined one.
+    expect(
+      isSameDropdownPosition(below, { ...below, top: undefined, bottom: 123 }),
+    ).toBe(false)
+  })
+})
diff --git a/components/bookkeeping/account-combobox-position.ts b/components/bookkeeping/account-combobox-position.ts
new file mode 100644
index 00000000..1e963949
--- /dev/null
+++ b/components/bookkeeping/account-combobox-position.ts
@@ -0,0 +1,92 @@
+/**
+ * Pure positioning for AccountCombobox's portaled (non-flat) dropdown.
+ *
+ * The non-flat dropdown renders on document.body (see AccountCombobox) so a
+ * scrollable DialogContent can never clip it or grow a horizontal scrollbar
+ * around it. That trades CSS anchoring (absolute + top-full) for explicit
+ * viewport math, which lives here so it can be unit-tested headlessly.
+ *
+ * All numbers are CSS pixels in viewport coordinates (getBoundingClientRect
+ * space), matching position: fixed.
+ */
+
+export interface DropdownAnchorRect {
+  top: number
+  bottom: number
+  left: number
+  width: number
+}
+
+export interface DropdownViewportSize {
+  width: number
+  height: number
+}
+
+export interface DropdownPosition {
+  left: number
+  width: number
+  maxHeight: number
+  /** Set when the dropdown opens below the anchor (CSS `top`). */
+  top?: number
+  /**
+   * Set when the dropdown opens above the anchor (CSS `bottom`, measured from
+   * the viewport bottom). Anchoring by `bottom` lets the panel grow upward
+   * without knowing its own height.
+   */
+  bottom?: number
+}
+
+/** 34rem: wide enough for account number + name + activation marker. */
+export const DROPDOWN_PREFERRED_WIDTH = 544
+/** Minimum gap kept between the dropdown and every viewport edge. */
+export const DROPDOWN_VIEWPORT_MARGIN = 8
+/** Gap between the anchor (trigger) and the dropdown. */
+export const DROPDOWN_ANCHOR_GAP = 4
+/** The dropdown's own scroll ceiling (was max-h-[300px] pre-portal). */
+export const DROPDOWN_MAX_HEIGHT = 300
+/** Below this much room the dropdown flips above the anchor instead. */
+const MIN_USEFUL_HEIGHT = 120
+/** Height floor so a cramped viewport still shows a scrollable list. */
+const HEIGHT_FLOOR = 96
+
+/**
+ * Shallow equality over the full position shape. The scroll/resize reposition
+ * handler uses this to skip setState when the recomputed geometry is
+ * unchanged (e.g. scroll events that did not move the anchor), so React does
+ * not re-render the open dropdown on every scroll tick.
+ */
+export function isSameDropdownPosition(
+  a: DropdownPosition | null,
+  b: DropdownPosition,
+): boolean {
+  return (
+    a !== null &&
+    a.left === b.left &&
+    a.width === b.width &&
+    a.maxHeight === b.maxHeight &&
+    a.top === b.top &&
+    a.bottom === b.bottom
+  )
+}
+
+export function computeDropdownPosition(
+  anchor: DropdownAnchorRect,
+  viewport: DropdownViewportSize,
+): DropdownPosition {
+  const margin = DROPDOWN_VIEWPORT_MARGIN
+  const maxWidth = Math.max(viewport.width - margin * 2, 0)
+  const width = Math.min(Math.max(anchor.width, DROPDOWN_PREFERRED_WIDTH), maxWidth)
+  const left = Math.max(margin, Math.min(anchor.left, viewport.width - width - margin))
+
+  const spaceBelow = viewport.height - anchor.bottom - DROPDOWN_ANCHOR_GAP - margin
+  const spaceAbove = anchor.top - DROPDOWN_ANCHOR_GAP - margin
+  const openUp = spaceBelow < MIN_USEFUL_HEIGHT && spaceAbove > spaceBelow
+
+  const available = openUp ? spaceAbove : spaceBelow
+  const maxHeight = Math.min(DROPDOWN_MAX_HEIGHT, Math.max(available, HEIGHT_FLOOR))
+
+  if (openUp) {
+    return { left, width, maxHeight, bottom: viewport.height - anchor.top + DROPDOWN_ANCHOR_GAP }
+  }
+  return { left, width, maxHeight, top: anchor.bottom + DROPDOWN_ANCHOR_GAP }
+}
diff --git a/components/invoices/SendInvoiceDialog.tsx b/components/invoices/SendInvoiceDialog.tsx
index 92b32b95..4a501c8e 100644
--- a/components/invoices/SendInvoiceDialog.tsx
+++ b/components/invoices/SendInvoiceDialog.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { HelpPopover } from '@/components/ui/help-popover'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
 import { useToast } from '@/components/ui/use-toast'
@@ -497,10 +498,21 @@ export default function SendInvoiceDialog({
             {mode === 'email' && (
               <div className="space-y-3 rounded-lg border border-border p-3">
                 <div className="space-y-1 text-sm">
-                  <p>
-                    <span className="font-medium">{t('recipient_to_label')}:</span>{' '}
-                    {invoice.customer.email}
-                  </p>
+                  <div className="flex items-start justify-between gap-2">
+                    <p>
+                      <span className="font-medium">{t('recipient_to_label')}:</span>{' '}
+                      {invoice.customer.email}
+                    </p>
+                    {/* Convention 7: the why of fixed CC/BCC and the extra
+                        address rules live behind the "?": only the actual
+                        addresses stay inline. */}
+                    <HelpPopover>
+                      <p>{t('recipient_help_fixed')}</p>
+                      {canCustomizeRecipients && (
+                        <p className="mt-2">{t('recipient_help_additional')}</p>
+                      )}
+                    </HelpPopover>
+                  </div>
                   <p className="text-muted-foreground">
                     <span className="font-medium text-foreground">{t('recipient_fixed_cc_label')}:</span>{' '}
                     {fixedRecipients.cc.length > 0 ? fixedRecipients.cc.join(', ') : t('recipient_none')}
@@ -536,7 +548,6 @@ export default function SendInvoiceDialog({
                         />
                       </div>
                     </div>
-                    <p className="text-xs text-muted-foreground">{t('recipient_additional_hint')}</p>
                     {recipientError && (
                       <p className="text-sm text-destructive" role="alert">{recipientError}</p>
                     )}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 89df2453..886c760c 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -31,11 +31,23 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, onInteractOutside, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      // Companion overlays (AccountCombobox's dropdown, HelpPopover panels)
+      // are portaled to document.body so this content's overflow-y-auto can
+      // never clip them. DOM-wise that puts them OUTSIDE the dialog, so Radix
+      // would otherwise dismiss the dialog on a pointerdown inside them:
+      // anything marked data-dialog-companion counts as inside.
+      onInteractOutside={(event) => {
+        onInteractOutside?.(event)
+        const target = event.target
+        if (target instanceof Element && target.closest('[data-dialog-companion]')) {
+          event.preventDefault()
+        }
+      }}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-[var(--shadow-md)] max-h-[calc(100dvh-2rem)] overflow-y-auto scrollbar-visible data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 sm:rounded-xl",
         className
@@ -106,7 +118,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     data-ph-unmask=""
     className={cn(
-      "text-lg leading-none tracking-tight",
+      "break-words text-lg leading-none tracking-tight",
       className
     )}
     {...props}
@@ -121,7 +133,7 @@ const DialogDescription = React.forwardRef<
   <DialogPrimitive.Description
     ref={ref}
     data-ph-unmask=""
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("break-words text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
diff --git a/components/ui/help-popover.tsx b/components/ui/help-popover.tsx
index c3235f37..9729ad09 100644
--- a/components/ui/help-popover.tsx
+++ b/components/ui/help-popover.tsx
@@ -86,9 +86,13 @@ export function HelpPopover({ children, className }: HelpPopoverProps) {
             ref={panelRef}
             role="note"
             data-help-popover=""
+            // Inside a modal dialog the panel is DOM-outside DialogContent:
+            // data-dialog-companion keeps a click in it from dismissing the
+            // dialog, and pointer-events-auto undoes the modal body lock.
+            data-dialog-companion=""
             // data-ph-unmask: page help is static i18n chrome in session replays.
             data-ph-unmask=""
-            className="fixed z-[60] w-[300px] rounded-lg border border-border bg-popover p-4 text-[13px] leading-relaxed text-foreground shadow-lg animate-in fade-in slide-in-from-top-1 duration-150"
+            className="pointer-events-auto fixed z-[60] w-[300px] rounded-lg border border-border bg-popover p-4 text-[13px] leading-relaxed text-foreground shadow-lg animate-in fade-in slide-in-from-top-1 duration-150"
             style={{ top: pos.top, left: pos.left }}
           >
             {children}
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index bb62dbf4..31198470 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -49,11 +49,20 @@ interface SheetContentProps
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   SheetContentProps
->(({ className, children, side = "right", ...props }, ref) => (
+>(({ className, children, side = "right", onInteractOutside, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      // Same companion-overlay guard as DialogContent: a portaled panel
+      // marked data-dialog-companion counts as an inside interaction.
+      onInteractOutside={(event) => {
+        onInteractOutside?.(event)
+        const target = event.target
+        if (target instanceof Element && target.closest('[data-dialog-companion]')) {
+          event.preventDefault()
+        }
+      }}
       className={cn(
         "fixed z-50 flex flex-col gap-4 bg-background p-6 transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300",
         sideClasses[side],
@@ -105,7 +114,7 @@ const SheetTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     data-ph-unmask=""
-    className={cn("text-base tracking-tight", className)}
+    className={cn("break-words text-base tracking-tight", className)}
     {...props}
   />
 ))
@@ -118,7 +127,7 @@ const SheetDescription = React.forwardRef<
   <DialogPrimitive.Description
     ref={ref}
     data-ph-unmask=""
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("break-words text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
diff --git a/messages/en.json b/messages/en.json
index bc95cc46..607c7125 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -4224,7 +4224,8 @@
     "recipient_additional_cc_label": "Additional CC for this invoice",
     "recipient_additional_bcc_label": "Additional BCC for this invoice",
     "recipient_additional_placeholder": "name@company.com",
-    "recipient_additional_hint": "Separate multiple addresses with commas or semicolons.",
+    "recipient_help_fixed": "Fixed CC and BCC addresses are added to every send. They come from the invoice email settings and from the customer card.",
+    "recipient_help_additional": "Additional addresses apply to this send only. Separate multiple addresses with commas or semicolons.",
     "recipient_invalid": "Invalid email address: {address}",
     "recipient_too_many": "An invoice email can have at most {count} recipients in total.",
     "cancel": "Cancel",
diff --git a/messages/sv.json b/messages/sv.json
index 3e1ec04d..43a0dce8 100644
--- a/messages/sv.json
+++ b/messages/sv.json
@@ -4224,7 +4224,8 @@
     "recipient_additional_cc_label": "Extra CC för denna faktura",
     "recipient_additional_bcc_label": "Extra BCC för denna faktura",
     "recipient_additional_placeholder": "namn@foretag.se",
-    "recipient_additional_hint": "Separera flera adresser med komma eller semikolon.",
+    "recipient_help_fixed": "Fasta CC- och BCC-adresser läggs till på varje utskick. De hämtas från e-postinställningarna för fakturor och från kundkortet.",
+    "recipient_help_additional": "Extra adresser gäller bara det här utskicket. Separera flera adresser med komma eller semikolon.",
     "recipient_invalid": "Ogiltig e-postadress: {address}",
     "recipient_too_many": "Ett fakturautskick får ha högst {count} mottagare totalt.",
     "cancel": "Avbryt",
diff --git a/scripts/checks/antipatterns-baseline.json b/scripts/checks/antipatterns-baseline.json
index 479fdcfd..3ad8e863 100644
--- a/scripts/checks/antipatterns-baseline.json
+++ b/scripts/checks/antipatterns-baseline.json
@@ -20,5 +20,17 @@
       "lib/bokslut/tax-provision/bolagsskatt-calculator.ts",
       "lib/bokslut/tax-provision/sarskild-loneskatt-calculator.ts"
     ]
+  },
+  "dialogOverflowRisk": {
+    "count": 7,
+    "files": [
+      "app/(dashboard)/supplier-invoices/[id]/page.tsx",
+      "components/bookkeeping/JournalEntryForm.tsx",
+      "components/invoices/PaymentBookingDialog.tsx",
+      "components/invoices/SendInvoiceDialog.tsx",
+      "components/reports/views/index.tsx",
+      "components/salary/NewEmployeeDialog.tsx",
+      "components/transactions/InvoiceMatchDialog.tsx"
+    ]
   }
 }
diff --git a/scripts/checks/no-new-antipatterns.mjs b/scripts/checks/no-new-antipatterns.mjs
index e2321b5e..ccb1ba8a 100644
--- a/scripts/checks/no-new-antipatterns.mjs
+++ b/scripts/checks/no-new-antipatterns.mjs
@@ -82,6 +82,23 @@
  *      entitlement paywall live (diagnosed 2026-08-17). Read flags as values
  *      via lib/env/public-flags. No baseline: the count is 0, any new one is
  *      a hard failure.
+ *   11. dialog-overflow-risk: patterns that make a dialog scroll sideways.
+ *      (a) a bare `1fr` grid track inside grid-cols-[...] in a file that
+ *      imports DialogContent/SheetContent: per the CSS Grid spec a bare fr
+ *      track's implicit minimum is auto (its content's min-content size), so
+ *      the track refuses to shrink below its content and overflows the dialog
+ *      (StrikeLinesDialog and CorrectionEntryDialog shipped this, fixed
+ *      2026-08-19; TransactionBookingDialog had the safe minmax(0,1fr) idiom
+ *      all along). (b) whitespace-nowrap inside a <DialogContent>/
+ *      <SheetContent> JSX region outside DIALOG_NOWRAP_ALLOWED (numeric
+ *      columns inside their own overflow-x-auto wrapper are fine and
+ *      allowlisted per file). (c) a hand-rolled absolute overlay forcing
+ *      min-w-[>=20rem] in a file that never portals anything to
+ *      document.body: DialogContent's overflow-y-auto computes overflow-x to
+ *      auto as well, so an oversized non-portaled panel grows the dialog a
+ *      horizontal scrollbar instead of repositioning (AccountCombobox's
+ *      dropdown pre-2026-08-19). Tracked as a per-file baseline set that may
+ *      only shrink.
  *
  * Usage:
  *   node scripts/checks/no-new-antipatterns.mjs            # check (CI)
@@ -492,6 +509,85 @@ function findFoldedPublicFlags() {
   return [...new Set(findings)].sort()
 }
 
+// 11. dialog-overflow-risk. See the header comment for the three patterns.
+// Files whose whitespace-nowrap cells are fixed-width numeric/tabular columns
+// living inside their OWN overflow-x-auto scroll container, so they cannot
+// widen the dialog itself:
+// - MockDataImportDialog: CSV preview built on the Table primitive, which
+//   self-wraps in overflow-auto (components/ui/table.tsx).
+// - PaymentFileDialog: payment-line table wrapped in an overflow-x-auto div.
+const DIALOG_NOWRAP_ALLOWED = new Set([
+  'components/extensions/shared/MockDataImportDialog.tsx',
+  'components/supplier-invoices/PaymentFileDialog.tsx',
+])
+
+const DIALOG_CONTENT_IMPORT_RE =
+  /import\s*\{[^}]*\b(?:DialogContent|SheetContent)\b[^}]*\}\s*from\s*['"]@\/components\/ui\/(?:dialog|sheet)['"]/
+const GRID_COLS_TEMPLATE_RE = /grid-cols-\[([^\]]+)\]/g
+const BARE_FR_TOKEN_RE = /^\d+(?:\.\d+)?fr$/
+const WIDE_MIN_W_RE = /min-w-\[(\d+(?:\.\d+)?)(rem|px)\]/g
+const PORTAL_HINT_RE = /createPortal|\bPortal\b/
+const OVERLAY_ABSOLUTE_RE = /\babsolute\b/
+const OVERLAY_Z_RE = /\bz-(?:40|50|\[\d+\])/
+
+/**
+ * Overflow-risky patterns in dialog/sheet hosts. Returns
+ * { file, where, rule } findings; the ratchet compares the file set.
+ */
+function findDialogOverflowRisks() {
+  const files = [
+    ...walk(path.join(ROOT, 'app'), ['.tsx']),
+    ...walk(path.join(ROOT, 'components'), ['.tsx']),
+    ...walk(path.join(ROOT, 'extensions'), ['.tsx']),
+  ]
+  const findings = []
+  for (const f of files) {
+    const r = rel(f)
+    const src = fs.readFileSync(f, 'utf8')
+    const lines = src.split('\n')
+
+    if (DIALOG_CONTENT_IMPORT_RE.test(src)) {
+      // (a) bare fr grid tracks anywhere in a dialog-hosting file.
+      lines.forEach((line, i) => {
+        for (const m of line.matchAll(GRID_COLS_TEMPLATE_RE)) {
+          if (m[1].split('_').some((token) => BARE_FR_TOKEN_RE.test(token))) {
+            findings.push({ file: r, where: `${r}:${i + 1}`, rule: 'bare-fr-grid-track' })
+          }
+        }
+      })
+      // (b) whitespace-nowrap inside the <DialogContent>/<SheetContent>
+      // region. Line-based depth tracking is a heuristic, but dialog JSX in
+      // this repo keeps the tags on their own lines.
+      if (!DIALOG_NOWRAP_ALLOWED.has(r)) {
+        let depth = 0
+        lines.forEach((line, i) => {
+          if (/<(?:Dialog|Sheet)Content\b/.test(line)) depth++
+          if (depth > 0 && line.includes('whitespace-nowrap')) {
+            findings.push({ file: r, where: `${r}:${i + 1}`, rule: 'nowrap-in-dialog' })
+          }
+          const closes = (line.match(/<\/(?:Dialog|Sheet)Content>/g) || []).length
+          depth = Math.max(0, depth - closes)
+        })
+      }
+    }
+
+    // (c) a hand-rolled absolute overlay forcing a >=20rem minimum width in a
+    // file that never portals anything: inside a scrollable DialogContent
+    // that minimum becomes a horizontal scrollbar on the dialog.
+    if (!PORTAL_HINT_RE.test(src) && OVERLAY_ABSOLUTE_RE.test(src) && OVERLAY_Z_RE.test(src)) {
+      lines.forEach((line, i) => {
+        for (const m of line.matchAll(WIDE_MIN_W_RE)) {
+          const value = parseFloat(m[1])
+          if ((m[2] === 'rem' && value >= 20) || (m[2] === 'px' && value >= 320)) {
+            findings.push({ file: r, where: `${r}:${i + 1}`, rule: 'unportaled-wide-overlay' })
+          }
+        }
+      })
+    }
+  }
+  return findings.sort((a, b) => a.where.localeCompare(b.where))
+}
+
 // Dependencies pinned to an EXACT version on purpose, because a bump broke prod
 // and must not silently return via `npm update`, a dependabot bump, or a manual
 // install. Any drift (in package.json OR the lockfile) fails CI. See DECISIONS.md.
@@ -834,8 +930,11 @@ const current = {
   extensionRoutes: findExtensionRouteFindings(ROOT),
   offLadderRadii: findOffLadderRadii(),
   foldedPublicFlags: findFoldedPublicFlags(),
+  dialogOverflowRisk: findDialogOverflowRisks(),
 }
 
+const dialogOverflowFiles = [...new Set(current.dialogOverflowRisk.map((f) => f.file))].sort()
+
 const isUpdate = process.argv.includes('--update')
 
 if (isUpdate) {
@@ -849,6 +948,10 @@ if (isUpdate) {
       count: current.ledgerScanningReports.length,
       files: current.ledgerScanningReports,
     },
+    dialogOverflowRisk: {
+      count: dialogOverflowFiles.length,
+      files: dialogOverflowFiles,
+    },
   }
   fs.writeFileSync(BASELINE_PATH, JSON.stringify(baseline, null, 2) + '\n')
   console.log(
@@ -1068,6 +1171,31 @@ if (newLedgerScans.length) {
   )
 }
 
+// 1e3. dialog-overflow-risk: per-file ratchet, a finding in a file outside
+// the baseline set is a NEW violation. Grandfathered files stay until fixed.
+const dialogOverflowBaseline = new Set(baseline.dialogOverflowRisk?.files ?? [])
+const newDialogOverflow = current.dialogOverflowRisk.filter(
+  (finding) => !dialogOverflowBaseline.has(finding.file),
+)
+const fixedDialogOverflow = [...dialogOverflowBaseline].filter(
+  (file) => !dialogOverflowFiles.includes(file),
+)
+if (newDialogOverflow.length) {
+  failed = true
+  console.error(
+    `\n✗ dialog-overflow-risk: ${newDialogOverflow.length} overflow-risky pattern(s) in new dialog/sheet file(s):`,
+  )
+  newDialogOverflow.forEach((finding) => console.error(`    ${finding.where}  (${finding.rule})`))
+  console.error(
+    '  → bare-fr-grid-track: a bare 1fr track refuses to shrink below its content; use\n' +
+      '    minmax(0,1fr), plus min-w-0 on the cell when a combobox/long text lives in it.\n' +
+      '    nowrap-in-dialog: give the table/row its own overflow-x-auto wrapper, then allowlist\n' +
+      '    the file in DIALOG_NOWRAP_ALLOWED in this script with a reason.\n' +
+      '    unportaled-wide-overlay: portal the panel to document.body with viewport-clamped\n' +
+      '    geometry, like AccountCombobox\'s dropdown or info-tooltip.tsx.',
+  )
+}
+
 // 2. naive-ore-round: count may not increase.
 if (current.naiveOreRound > baseline.naiveOreRound.count) {
   failed = true
@@ -1079,11 +1207,18 @@ if (current.naiveOreRound > baseline.naiveOreRound.count) {
 }
 
 // Report ratchet-down progress (informational, never fails).
-if (fixedAuthFiles.length || fixedLedgerScans.length || current.naiveOreRound < baseline.naiveOreRound.count) {
+if (
+  fixedAuthFiles.length ||
+  fixedLedgerScans.length ||
+  fixedDialogOverflow.length ||
+  current.naiveOreRound < baseline.naiveOreRound.count
+) {
   console.log('\n✓ Progress since baseline:')
   if (fixedAuthFiles.length) console.log(`    raw-route-auth: -${fixedAuthFiles.length} file(s)`)
   if (fixedLedgerScans.length)
     console.log(`    ledger-scanning-report: -${fixedLedgerScans.length} file(s)`)
+  if (fixedDialogOverflow.length)
+    console.log(`    dialog-overflow-risk: -${fixedDialogOverflow.length} file(s)`)
   if (current.naiveOreRound < baseline.naiveOreRound.count)
     console.log(`    naive-ore-round: -${baseline.naiveOreRound.count - current.naiveOreRound} occurrence(s)`)
   console.log('    Run with --update to ratchet the baseline down and lock in the gains.')
@@ -1101,5 +1236,5 @@ if (failed) {
   process.exit(1)
 }
 console.log(
-  `\n✓ Antipattern guard passed (raw-route-auth: ${current.rawRouteAuth.length}, naive-ore-round: ${current.naiveOreRound}, hand-rolled-invariant: ${current.handRolledInvariants}, ledger-scanning-report: ${current.ledgerScanningReports.length}, direct-jel-insert: 0, leaky-supabase-client: 0, pinned-dep: 0, raw-user-error: 0, sek-labelled-amount: 0, off-ladder-radius: 0, folded-public-flag: 0, cross-extension-import: 0, ungated-extension-route: ${current.extensionRoutes.ungated.length}/${UNGATED_EXTENSION_ROUTES.size} allowlisted).`,
+  `\n✓ Antipattern guard passed (raw-route-auth: ${current.rawRouteAuth.length}, naive-ore-round: ${current.naiveOreRound}, hand-rolled-invariant: ${current.handRolledInvariants}, ledger-scanning-report: ${current.ledgerScanningReports.length}, direct-jel-insert: 0, leaky-supabase-client: 0, pinned-dep: 0, raw-user-error: 0, sek-labelled-amount: 0, off-ladder-radius: 0, folded-public-flag: 0, cross-extension-import: 0, ungated-extension-route: ${current.extensionRoutes.ungated.length}/${UNGATED_EXTENSION_ROUTES.size} allowlisted, dialog-overflow-risk: ${dialogOverflowFiles.length} file(s)).`,
 )