From a284066da523a005bcea39354b4d4d5d70a7f4c1 Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Mon, 27 Jul 2026 12:07:26 +0300
Subject: [PATCH] Refactor GalleryPanel and GalleryBrowser for improved layout
 and scrolling behavior

Updated the GalleryPanel component to adjust its height calculation, ensuring it occupies the full screen without causing dual scrollbars. Modified the GalleryBrowser to implement a fixed-size grid layout, enhancing the visual consistency of image tiles across different screen sizes. These changes improve the overall user experience and usability of the image gallery interface.
---
 frontend/src/features/admin/images/GalleryPanel.tsx | 6 +++++-
 frontend/src/features/admin/images/ImageGallery.tsx | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/admin/images/GalleryPanel.tsx b/frontend/src/features/admin/images/GalleryPanel.tsx
index ed67384..2eba8ce 100644
--- a/frontend/src/features/admin/images/GalleryPanel.tsx
+++ b/frontend/src/features/admin/images/GalleryPanel.tsx
@@ -6,10 +6,14 @@ import { GalleryBrowser } from './ImageGallery'
  * Своего заголовка нет: страница целиком об одном, и её название уже написано в активной вкладке
  * админки. Страница занимает экран и сама не прокручивается — пагинации у списка нет, а две полосы
  * прокрутки (внешняя и внутри сетки) мешали бы друг другу.
+ *
+ * 14rem — то, что занято над панелью и под ней: шапка сайта, отступы main, заголовок админки
+ * и строка вкладок. Промахнуться в меньшую сторону безопасно (снизу останется зазор), в большую —
+ * вернётся вторая полоса прокрутки.
  */
 export function GalleryPanel() {
   return (
-    <div className="crt-panel flex h-[calc(100vh-11rem)] min-h-96 flex-col rounded-md p-4">
+    <div className="crt-panel flex h-[calc(100vh-14rem)] min-h-96 flex-col overflow-hidden rounded-md p-4">
       <GalleryBrowser fill />
     </div>
   )
diff --git a/frontend/src/features/admin/images/ImageGallery.tsx b/frontend/src/features/admin/images/ImageGallery.tsx
index 302776f..122fac6 100644
--- a/frontend/src/features/admin/images/ImageGallery.tsx
+++ b/frontend/src/features/admin/images/ImageGallery.tsx
@@ -162,7 +162,9 @@ export function GalleryBrowser({
           </p>
         )}
         {!isLoading && sorted.length > 0 && (
-          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
+          // Плитки фиксированного размера, а не N колонок на всю ширину: на широком экране пять
+          // колонок растягивали постеры на треть экрана каждый.
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
             {sorted.map((img) => (
               <div key={img.id} className="group relative">
                 <button