#434

frontend/src/components/counts/CountsAxes.tsx

@@ -2,7 +2,7 @@ import SortableList from '@/components/common/SortableList'
 import { countsAxisFields, countsFilterFields, readCountsJSON, useCountsDefinition }
     from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
-import { inputClass } from '@/lib/utils'
+import { cn, inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { CountsAxis } from '@/lib/countsDefinitions'
@@ -43,8 +43,12 @@ const CountsAxes = ({ params, update }: {
         <div className="rounded border dark:border-slate-700">{content}</div>
       </fieldset>} renderItem={(id, group) => {
         const axis = axes.find (axis => axis.field === id)
-        return <div className="flex flex-wrap items-center gap-2 text-sm">
-          {group === 'available' && <span className="inline-flex gap-1">
+	return <div className={cn ('flex items-center gap-2 text-sm',
+	    group !== 'available' && 'flex-wrap')}>
+	  <span className="min-w-0 flex-1 break-words">
+	    {label (available.find (field => field.key === id)?.label ?? 'axis')}
+	  </span>
+	  {group === 'available' && <span className="ml-auto inline-flex shrink-0 gap-1">
             {(['rows', 'cols'] as const).map (target => <button key={target} type="button"
                 className="h-7 w-7 rounded-full border border-slate-300 bg-slate-100
                 text-xs text-slate-700 hover:bg-blue-100 hover:text-blue-900
@@ -58,7 +62,6 @@ const CountsAxes = ({ params, update }: {
                 lang={message ('axisPlace').language} onClick={() => place (id, target)}>
               {label (target)}</button>)}
           </span>}
-          {label (available.find (field => field.key === id)?.label ?? 'axis')}
           {group !== 'available' && <>
             {countsFilterFields (definition)[id] === 'datetime' && <select
                 className={inputClass (false, 'w-auto py-0')}