chore: release v0.21.3

frontend/src/components/AwardEditor.tsx

@@ -377,7 +377,7 @@ export function AwardEditor({ open, onClose, onSaved }: Props) {
 
         <div className="grid grid-cols-[220px_1fr] min-h-0 overflow-hidden">
           {/* Left: award list */}
-          <div className="border-r flex flex-col min-h-0">
+          <div className="border-r flex flex-col min-w-0 min-h-0">
             <div className="p-2 border-b">
               <div className="relative">
                 <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
@@ -422,8 +422,14 @@ export function AwardEditor({ open, onClose, onSaved }: Props) {
             </Button>
           </div>
 
-          {/* Right: tabbed editor for selected award */}
-          <div className="flex flex-col min-h-0 overflow-hidden">
+          {/* Right: tabbed editor for selected award.
+              min-w-0 is load-bearing: this sits in a `1fr` grid track, and a 1fr
+              track has min-width:auto — it refuses to shrink below its content's
+              intrinsic width, so a wide row (the band/mode chip lists, a long
+              translated label) grew the track and pushed the whole editor out
+              past the dialog instead of scrolling inside it. Same reason on the
+              Tabs below: a flex item defaults to min-width:auto too. */}
+          <div className="flex flex-col min-w-0 min-h-0 overflow-hidden">
             {err && <div onClick={() => setErr('')} title={t('awed.clickToDismiss')} className="mx-4 mt-3 text-xs text-destructive bg-destructive/10 border border-destructive/30 rounded px-3 py-1.5 whitespace-pre-line break-all cursor-pointer">{err}</div>}
             {/* A fix shipped for an award this operator has customised. We did NOT
                 apply it — that would destroy their work — so we offer it, and say
@@ -459,7 +465,7 @@ export function AwardEditor({ open, onClose, onSaved }: Props) {
             {!cur ? (
               <div className="flex-1 grid place-items-center text-sm text-muted-foreground">{t('awed.selectOrCreate')}</div>
             ) : (
-              <Tabs defaultValue="info" className="flex flex-col min-h-0 overflow-hidden">
+              <Tabs defaultValue="info" className="flex flex-col min-w-0 min-h-0 overflow-hidden">
                 <TabsList className="px-3 justify-start">
                   <TabsTrigger value="info">{t('awed.tabInfo')}</TabsTrigger>
                   <TabsTrigger value="type">{t('awed.tabType')}</TabsTrigger>
@@ -729,7 +735,11 @@ export function AwardEditor({ open, onClose, onSaved }: Props) {
           </div>
         </div>
 
-        <DialogFooter className="px-5 py-3 border-t !flex-row">
+        {/* Eight buttons on one unwrappable row fitted in English and overflowed
+            in French, where the labels are half again as long. Wrap instead of
+            widening the dialog; gap-2 replaces the base sm:space-x-2, whose
+            margin-left approach leaves no vertical gap once a row wraps. */}
+        <DialogFooter className="px-5 py-3 border-t !flex-row flex-wrap sm:space-x-0 gap-2">
           <Button variant="ghost" onClick={reset}><RotateCcw className="size-3.5 mr-1" /> {t('awed.resetDefaults')}</Button>
           <Button variant="outline" onClick={exportAwards} title={t('awed.exportTitle')}>
             <Download className="size-3.5 mr-1" /> {t('awed.export')}