From b1f77fa7dcddc668a28a93649dce2102d7305b78 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Fri, 17 Jul 2026 00:44:24 +0700
Subject: [PATCH] fix(settings,templates): contain popover scroll, show the
 variable count on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 12 ++++++++++--
 frontend/src/pages/templates/template.tsx       |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/settings/settings-prompt.tsx b/frontend/src/pages/settings/settings-prompt.tsx
index b76bf9c8..53290408 100644
--- a/frontend/src/pages/settings/settings-prompt.tsx
+++ b/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>
diff --git a/frontend/src/pages/templates/template.tsx b/frontend/src/pages/templates/template.tsx
index c62e847b..c29d21b2 100644
--- a/frontend/src/pages/templates/template.tsx
+++ b/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>