From 82b412f71855a8f60fb47be6bb37bdaf16bf4da1 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <53005142+the-luap@users.noreply.github.com>
Date: Fri, 11 Sep 2026 15:37:39 +0200
Subject: [PATCH] fix(admin): keep header-style tiles from overflowing their
 cards (stable) (#1423)

Apply the header-style overflow fix to stable: size the grids from their container width and wrap long translated labels within each card.
---
 .../theme-customizer/HeaderStyleCard.tsx      | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/admin/theme-customizer/HeaderStyleCard.tsx b/frontend/src/components/admin/theme-customizer/HeaderStyleCard.tsx
index 5d45a3e4..ee4b8821 100644
--- a/frontend/src/components/admin/theme-customizer/HeaderStyleCard.tsx
+++ b/frontend/src/components/admin/theme-customizer/HeaderStyleCard.tsx
@@ -22,7 +22,13 @@ export const HeaderStyleCard: React.FC<HeaderStyleCardProps> = ({ localTheme, ha
       <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
         {t('branding.headerStyleDescription', 'Choose how the gallery header appears. The header style is independent of the photo layout.')}
       </p>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      {/* auto-fit/minmax rather than viewport breakpoints (#1412): the
+          breakpoints size the columns off the WINDOW, but this card sits in a
+          settings panel that is far narrower, so `lg:grid-cols-3` produced
+          three ~85px columns no German string could fit in. A minimum track
+          width lets the column count follow the container instead, and drops
+          to fewer columns when there is no room. */}
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-4">
         {(Object.keys(headerStyleIcons) as HeaderStyleType[]).map((style) => (
           <button
             type="button"
@@ -34,14 +40,21 @@ export const HeaderStyleCard: React.FC<HeaderStyleCardProps> = ({ localTheme, ha
                 : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
             }`}
           >
-            <div className="flex flex-col items-center text-center">
+            {/* min-w-0 + break-words: a grid item will not shrink below its
+                min-content width, and German compounds here are long enough to
+                exceed a narrow column — "Veranstaltungsinfo-Overlay" and
+                "Veranstaltungsdetails" spilled out of the card and over the
+                neighbouring one at three columns in a narrow panel (#1412).
+                Any translation can do this, so the constraint belongs on the
+                element rather than on the strings. */}
+            <div className="flex flex-col items-center text-center w-full min-w-0">
               <div className="mb-2 text-neutral-700 dark:text-neutral-300">
                 {headerStyleIcons[style]}
               </div>
-              <span className="font-medium text-sm capitalize text-neutral-900 dark:text-neutral-100">
+              <span className="w-full break-words font-medium text-sm capitalize text-neutral-900 dark:text-neutral-100">
                 {t(`branding.headerStyleOptions.${style}`, style)}
               </span>
-              <span className="text-xs text-neutral-600 dark:text-neutral-400 mt-1">
+              <span className="w-full break-words text-xs text-neutral-600 dark:text-neutral-400 mt-1">
                 {t(`branding.headerStyleDescriptions.${style}`, '')}
               </span>
             </div>
@@ -61,7 +74,7 @@ export const HeaderStyleCard: React.FC<HeaderStyleCardProps> = ({ localTheme, ha
           <p className="text-xs text-neutral-600 dark:text-neutral-400 mb-4">
             {t('branding.heroDividerDescription', 'Choose how the transition between the hero image and gallery content looks.')}
           </p>
-          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(6rem,1fr))] gap-3">
             {(Object.keys(dividerStylePreviews) as HeroDividerStyle[]).map((divider) => (
               <button
                 type="button"
@@ -73,12 +86,12 @@ export const HeaderStyleCard: React.FC<HeaderStyleCardProps> = ({ localTheme, ha
                     : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
                 }`}
               >
-                <div className="flex flex-col items-center">
+                <div className="flex flex-col items-center w-full min-w-0">
                   <div className="w-full mb-2 bg-neutral-800 rounded-t overflow-hidden">
                     <div className="h-8"></div>
                     {dividerStylePreviews[divider]}
                   </div>
-                  <span className="text-xs font-medium capitalize text-neutral-900 dark:text-neutral-100">
+                  <span className="w-full break-words text-xs font-medium capitalize text-neutral-900 dark:text-neutral-100">
                     {t(`branding.dividerOptions.${divider}`, divider)}
                   </span>
                 </div>