fix(settings,templates): contain popover scroll, show the variable count on desktop

The variables and presets popovers scrolled the page once their own scroll hit
the end — overscroll-behavior defaulted to auto and a non-modal popover doesn't
lock the body. overscroll-contain keeps the momentum inside. Reproduced at
375x640: wheeling past the popover's end moved the body 0 -> 204px; with contain
it stays at 0.

The prompt variables card now shows the variable count on desktop too, matching
the preset-count badge the template card already carries.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/settings/settings-prompt.tsx

@@ -1052,7 +1052,15 @@ function Variables({ currentTemplate, onVariableClick, variables }: VariablesPro
         return (
             <div className="bg-card overflow-hidden rounded-lg border">
                 <div className="border-b px-4 py-3">
-                    <h4 className="text-sm font-medium">{VARIABLES_TITLE}</h4>
+                    <h4 className="flex items-center gap-2 text-sm font-medium">
+                        {VARIABLES_TITLE}
+                        <Badge
+                            className="ml-auto font-normal tabular-nums"
+                            variant="secondary"
+                        >
+                            {variables.length}
+                        </Badge>
+                    </h4>
                     <p className="text-muted-foreground mt-1 text-xs">
                         Click to insert at the cursor, or cycle through existing uses.
                     </p>
@@ -1082,7 +1090,7 @@ function Variables({ currentTemplate, onVariableClick, variables }: VariablesPro
             </PopoverTrigger>
             <PopoverContent
                 align="start"
-                className="max-h-(--radix-popover-content-available-height) w-(--radix-popover-trigger-width) overflow-y-auto p-0"
+                className="max-h-(--radix-popover-content-available-height) w-(--radix-popover-trigger-width) overflow-y-auto overscroll-contain p-0"
             >
                 {content}
             </PopoverContent>

frontend/src/pages/templates/template.tsx

@@ -675,7 +675,7 @@ function Template() {
             </PopoverTrigger>
             <PopoverContent
                 align="start"
-                className="max-h-(--radix-popover-content-available-height) w-(--radix-popover-trigger-width) overflow-y-auto p-0"
+                className="max-h-(--radix-popover-content-available-height) w-(--radix-popover-trigger-width) overflow-y-auto overscroll-contain p-0"
             >
                 {presetsList(() => setIsPresetsOpen(false))}
             </PopoverContent>