Update pnpm-lock.yaml for Radix UI package versions and enhance popover styling in CSS

Updated the pnpm-lock.yaml to override versions of '@radix-ui/react-dismissable-layer' and '@radix-ui/react-focus-scope' to their latest releases. Enhanced the CSS for popover components by introducing a new '.crt-popover' class for improved styling, ensuring a more distinct appearance over other content. Refactored related components to utilize the new class, improving visual consistency across the application.

frontend/pnpm-lock.yaml

@@ -4,6 +4,10 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  '@radix-ui/react-dismissable-layer': 1.1.17
+  '@radix-ui/react-focus-scope': 1.1.14
+
 importers:
 
   .:
@@ -458,19 +462,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.10':
-    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-dismissable-layer@1.1.17':
     resolution: {integrity: sha512-QAXwa38pG0xNAYh1pjdSaf86NrkqsMoDNmget/Y7X8O8E/C3Iqlj9GAPE4DfX9BPLXc7WH2TWSzMRnIoCdcjzQ==}
     peerDependencies:
@@ -515,19 +506,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -761,15 +739,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -2043,19 +2012,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.17)(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-dismissable-layer@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -2092,17 +2048,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-id@1.1.1(@types/react@19.2.17)(react@19.2.8)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.8)
@@ -2131,9 +2076,9 @@ snapshots:
       '@radix-ui/primitive': 1.1.2
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-id': 1.1.1(@types/react@19.2.17)(react@19.2.8)
       '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -2330,13 +2275,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.17)(react@19.2.8)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.8)
-      react: 19.2.8
-    optionalDependencies:
-      '@types/react': 19.2.17
-
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.17)(react@19.2.8)':
     dependencies:
       react: 19.2.8

frontend/pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+# Radix держит стек всплывающих слоёв (диалог, поповер, меню) в модульных синглтонах: два
+# экземпляра react-dismissable-layer или react-focus-scope в дереве — это два независимых стека,
+# и вложенный в диалог поповер перестаёт получать указатель и фокус. Пакеты пинуют точные версии
+# зависимостей, поэтому единственность обеспечивается здесь.
+overrides:
+  '@radix-ui/react-dismissable-layer': 1.1.17
+  '@radix-ui/react-focus-scope': 1.1.14

frontend/src/features/admin/images/GalleryPanel.tsx

@@ -1,20 +1,16 @@
-import { useTranslation } from 'react-i18next'
 import { GalleryBrowser } from './ImageGallery'
 
 /**
  * Отдельная страница «Галерея»: просмотр/загрузка/удаление всех изображений приложения.
  *
- * Страница занимает экран целиком и сама не прокручивается: списка на сотни картинок здесь нет
+ * Своего заголовка нет: страница целиком об одном, и её название уже написано в активной вкладке
- * пагинации, и две полосы прокрутки — внешняя и внутри сетки — мешали бы друг другу.
+ * админки. Страница занимает экран и сама не прокручивается — пагинации у списка нет, а две полосы
+ * прокрутки (внешняя и внутри сетки) мешали бы друг другу.
  */
 export function GalleryPanel() {
-  const { t } = useTranslation()
   return (
-    <div className="flex h-[calc(100vh-13rem)] min-h-96 flex-col gap-4">
+    <div className="crt-panel flex h-[calc(100vh-11rem)] min-h-96 flex-col rounded-md p-4">
-      <h2 className="crt-glow text-xl font-semibold">{t('admin.gallery.title')}</h2>
+      <GalleryBrowser fill />
-      <div className="crt-panel flex min-h-0 flex-1 flex-col rounded-md p-4">
-        <GalleryBrowser fill />
-      </div>
     </div>
   )
 }

frontend/src/features/admin/shows/ShowPicker.tsx

@@ -117,8 +117,9 @@ export function ShowPicker({
   }
 
   return (
-    // modal — потому что пикер живёт внутри диалогов: те держат фокус-ловушку, и без своего
+    // modal — потому что пикер живёт внутри диалогов: поповер регистрирует свой слой поверх
-    // слоя поповер отдавал бы фокус обратно диалогу, а в строку поиска нельзя было бы печатать.
+    // диалогового, забирает фокус-ловушку и получает указатель. Работает это лишь пока Radix
+    // загружен одним экземпляром — единственность версий закреплена в pnpm-workspace.yaml.
     <Popover modal open={open} onOpenChange={(next) => (next ? setOpen(true) : close())}>
       <PopoverTrigger
         className={cn(

frontend/src/index.css

@@ -121,4 +121,20 @@
       0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent) inset,
       0 8px 30px rgba(0, 0, 0, 0.25);
   }
+
+  /*
+   * Всплывающая панель (поповер, автокомплит). Отдельный класс, а не crt-panel с правкой фона:
+   * фон там задан в этом же слое, и утилита вроде bg-muted его не перебивает — выигрывает то,
+   * что объявлено позже.
+   *
+   * Фон непрозрачный и темнее панели, рамка заметнее: поповер висит над чужим текстом, и
+   * полупрозрачность превращала список в кашу из наложенных строк.
+   */
+  .crt-popover {
+    background: var(--background);
+    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent) inset,
+      0 16px 48px rgba(0, 0, 0, 0.65);
+  }
 }

frontend/src/shared/ui/popover.tsx

@@ -15,10 +15,10 @@ export const PopoverContent = forwardRef<
       ref={ref}
       align={align}
       sideOffset={sideOffset}
-      // Фон непрозрачный, в отличие от обычной crt-панели: поповер висит над чужим текстом,
+      // crt-popover, а не crt-panel: у всплывающей панели непрозрачный фон и заметнее рамка —
-      // и полупрозрачность превращала бы список в кашу из наложенных строк.
+      // она висит над чужим текстом (см. index.css).
       // z-50 — как у диалога: поповер живёт и внутри диалогов, и должен быть над ними.
-      className={cn('crt-panel z-50 rounded-sm bg-muted outline-none', className)}
+      className={cn('crt-popover z-50 rounded-sm outline-none', className)}
       {...props}
     />
   </PopoverPrimitive.Portal>

frontend/src/shared/ui/select.tsx

@@ -35,7 +35,7 @@ export const SelectContent = forwardRef<
       ref={ref}
       position={position}
       className={cn(
-        'crt-panel z-50 max-h-72 min-w-32 overflow-hidden rounded-sm',
+        'crt-popover z-50 max-h-72 min-w-32 overflow-hidden rounded-sm',
         position === 'popper' && 'translate-y-1',
         className,
       )}