From 35adf05ab939769b6a76b5419d80b0b13deab328 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Fri, 15 May 2026 21:01:44 +0700
Subject: [PATCH] refactor(frontend): visible Preset-templates title per
 platform

Split the panel heading so each form factor gets the title styled for
its container:

- Mobile (`<Sheet>`): use a visible `<SheetTitle>` (no more `sr-only`)
  in the sheet's own area, styled at `text-base` to match other Radix
  dialog headers in the app.
- Desktop (inline `<aside>`): keep the existing muted `<h3>` outside
  the scroll area so it stays pinned while the preset list scrolls.

Lift the title out of `asideContent` so it isn't rendered twice on
desktop; trim the wrapper's `p-4` to `px-4 pb-4` since the title
provides the top spacing in both layouts. Drop `p-2` on `SheetContent`
in favour of `p-0` so the new title can own its own padding.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/templates/template.tsx | 28 +++++++++++------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/templates/template.tsx b/frontend/src/pages/templates/template.tsx
index 7faff38b..a26e1e37 100644
--- a/frontend/src/pages/templates/template.tsx
+++ b/frontend/src/pages/templates/template.tsx
@@ -607,8 +607,7 @@ const Template = () => {
 
     const asideContent = useMemo(
         () => (
-            <div className="flex h-full max-h-[calc(100dvh-3rem)] flex-col overflow-y-auto p-4">
-                <h3 className="text-muted-foreground mb-2 text-sm font-medium">Preset templates</h3>
+            <div className="flex h-full max-h-[calc(100dvh-3rem)] flex-col overflow-y-auto px-4 pb-4">
                 {PRESET_TEMPLATES.map((preset, index) => (
                     <Collapsible
                         key={index}
@@ -669,20 +668,14 @@ const Template = () => {
                     open={isAsideOpen}
                 >
                     <SheetContent
-                        // Radix expects either a `<Description>` or an
-                        // explicit `aria-describedby={undefined}` opt-out;
-                        // the panel is a simple list of presets with no
-                        // descriptive sub-text, so the opt-out is honest.
+                        // The Sheet body is just a list of presets with no
+                        // descriptive sub-text — opt out of the Radix
+                        // Description warning explicitly.
                         aria-describedby={undefined}
-                        className="w-full max-w-[min(20rem,100vw)] p-2"
+                        className="w-full max-w-[min(20rem,100vw)] p-0"
                         side="right"
                     >
-                        {/* Radix dialogs require a title for screen readers.
-                            The visible h3 lives inside `asideContent` and is
-                            reused on desktop, where Sheet doesn't render — so
-                            mirror it here as an sr-only SheetTitle that only
-                            assistive tech picks up. */}
-                        <SheetTitle className="sr-only">Preset templates</SheetTitle>
+                        <SheetTitle className="px-4 pt-4 pb-2 text-base">Preset templates</SheetTitle>
                         {asideContent}
                     </SheetContent>
                 </Sheet>
@@ -693,7 +686,14 @@ const Template = () => {
                         isAsideOpen ? 'w-80 border-l sm:w-96' : 'w-0',
                     )}
                 >
-                    {isAsideOpen ? <div className="h-full w-80 sm:w-96">{asideContent}</div> : null}
+                    {isAsideOpen ? (
+                        <div className="h-full w-80 sm:w-96">
+                            <h3 className="text-muted-foreground px-4 pt-4 pb-2 text-sm font-medium">
+                                Preset templates
+                            </h3>
+                            {asideContent}
+                        </div>
+                    ) : null}
                 </aside>
             ),
         [isMobile, isAsideOpen, asideContent],