diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 4f8cf7a..4310175 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -11,9 +11,13 @@ function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.
       className={cn("relative", className)}
       {...props}
     >
+      {/*
+        `max-h-[inherit]` picks up a `max-h-*` set on the root. Without it the viewport grows to its
+        content height, so the overflow is clipped by the surrounding card instead of scrolling.
+      */}
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className="size-full max-h-[inherit] rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
diff --git a/visual-artifacts/issues/55/after-page-order.png b/visual-artifacts/issues/55/after-page-order.png
new file mode 100644
index 0000000..49de1c8
Binary files /dev/null and b/visual-artifacts/issues/55/after-page-order.png differ
diff --git a/visual-artifacts/issues/55/after-problems.png b/visual-artifacts/issues/55/after-problems.png
new file mode 100644
index 0000000..82de549
Binary files /dev/null and b/visual-artifacts/issues/55/after-problems.png differ
diff --git a/visual-artifacts/issues/55/before-page-order.png b/visual-artifacts/issues/55/before-page-order.png
new file mode 100644
index 0000000..14057e6
Binary files /dev/null and b/visual-artifacts/issues/55/before-page-order.png differ
diff --git a/visual-artifacts/issues/55/before-problems.png b/visual-artifacts/issues/55/before-problems.png
new file mode 100644
index 0000000..c6c6fb9
Binary files /dev/null and b/visual-artifacts/issues/55/before-problems.png differ