#434

frontend/src/components/TopNav.tsx

@@ -12,9 +12,7 @@ import TopNavUser from '@/components/TopNavUser'
 import TranslatedText from '@/components/TranslatedText'
 import { toast } from '@/components/ui/use-toast'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
-import { languageUIMessage } from '@/lib/i18n'
 import { isLocaleCode,
-	 localeLanguage,
 	 localeFromPath,
 	 switchLocalePath,
 	 unlocalisedPath } from '@/lib/locales'
@@ -134,7 +132,7 @@ export const menuOutline = (
 const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
   const { message, label } = useUITranslation ('shared')
   const locale = useLocale ()
-  const localeName = languageUIMessage (localeLanguage (locale), locale).text
+  const localeName = locales.find (entry => entry.code === locale)?.name
   const navigate = useLocaleNavigate ()
   const location = useLocation ()
   const currentLocation = useRef (location)
@@ -449,7 +447,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 	    }}>
 	  {locales.map (entry => isLocaleCode (entry.code) && (
 	      <option key={entry.code} value={entry.code}>
-		{formatUIString (languageUIMessage (localeLanguage (entry.code), locale).text, locale)}
+		{formatUIString (entry.name, entry.code)}
 	      </option>))}
 	</select>
       </label>)

frontend/src/components/common/SortableList.tsx

@@ -1,5 +1,6 @@
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor,
-         closestCenter, useDroppable, useSensor, useSensors } from '@dnd-kit/core'
+         closestCenter, pointerWithin, useDroppable, useSensor, useSensors }
+    from '@dnd-kit/core'
 import { SortableContext, arrayMove, rectSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 import { useId, useRef, useState } from 'react'
@@ -25,7 +26,7 @@ const sameGroups = (left: Groups, right: Groups): boolean =>
 const Group = ({ id, children }: { id: string; children: ReactNode }) => {
   const drop = useDroppable ({ id: `group:${id}` })
   return <div ref={drop.setNodeRef} className={cn (
-      'flex min-h-10 flex-wrap items-start gap-1 rounded p-1',
+      'min-w-0 rounded',
       drop.isOver && 'ring-1 ring-blue-500 dark:ring-blue-400')}>{children}</div>
 }
 
@@ -86,7 +87,12 @@ const SortableList = (
     drag.current = null
     setActive (null)
   }
-  return <DndContext sensors={sensors} collisionDetection={closestCenter}
+  return <DndContext sensors={sensors} collisionDetection={args => {
+      const hits = pointerWithin (args)
+      const available = hits.find (hit => hit.id === 'group:available')
+      return owner (String (args.active.id), groups) !== 'available'
+          && available != null ? [available] : closestCenter (args)
+    }}
       accessibility={{ announcements: {
           onDragStart: event => accessibleName (String (event.active.id)).text,
           onDragOver: event => event.over == null ? undefined : (
@@ -110,15 +116,17 @@ const SortableList = (
       }}>
 
     {/* Keep indexes and droppable geometry stable until the drop is committed. */}
-    {Object.entries (groups).map (([group, ids]) => <div key={group}>
+    {Object.entries (groups).map (([group, ids]) => <Group key={group} id={group}>
       {renderGroup (group, <SortableContext items={ids} strategy={rectSortingStrategy}>
-        <Group id={group}>{ids.map (id => <SortableItem key={id} id={id}
+        <div className="flex min-h-10 flex-wrap items-start gap-1 rounded p-1">
+          {ids.map (id => <SortableItem key={id} id={id}
 	    name={accessibleName (id)} fixed={fixed.includes (id)} handleId={`${scope}-${id}`}
 	    moveGroup={direction => moveGroup (id, direction)}>
           {renderItem (id, group)}
-        </SortableItem>)}</Group>
+          </SortableItem>)}
+        </div>
       </SortableContext>)}
-    </div>)}
+    </Group>)}
     {typeof document !== 'undefined' && createPortal (
 	<DragOverlay adjustScale={false}
 	    style={{ width: 'max-content', height: 'auto', maxWidth: 'calc(100vw - 2rem)' }}

frontend/src/components/counts/CountsAxes.tsx

@@ -1,11 +1,10 @@
 import LocalisedText from '@/components/LocalisedText'
 import SortableList from '@/components/common/SortableList'
-import { countsAxisFields, countsAxisLabel, countsFilterFields,
+import { countsAxisFields, countsFilterFields, countsFieldLabel,
 	 useCountsDefinition }
     from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { cn, inputClass } from '@/lib/utils'
-import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import { readCountState, encodeCountState } from '@/lib/queryState'
@@ -18,7 +17,6 @@ const CountsAxes = ({ params, update }: {
 ) => {
   const { label, message } = useUITranslation ('counts')
   const definition = useCountsDefinition ()
-  const locale = useLocale ()
   const motion = useClientMotion ()
   const available = countsAxisFields (definition, params.get ('definition') === 'history')
   const rows = readCountState<CountsAxis[]> (params, 'rows', [])
@@ -31,7 +29,7 @@ const CountsAxes = ({ params, update }: {
   const name = (id: string) => {
     const axis = axes.find (item => item.field === id)
     return axis == null ? message (available.find (field => field.key === id)?.label ?? 'axis')
-	: countsAxisLabel (axis, definition, locale)
+	: message (countsFieldLabel (axis.field))
   }
   const commit = (next: Record<string, string[]>) => {
     for (const group of ['rows', 'cols'] as const)

frontend/src/components/counts/CountsSummaryResults.tsx

@@ -226,7 +226,8 @@ const CountsSummaryTable = (
     return output
   }
   return <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
-    <CountsSelectableTable family={`pivot_${resource}`} columns={keys} stretched
+    <CountsSelectableTable family={`pivot_${resource}`} columns={keys}
+	stretched={keys.filter (key => key !== 'row_number').length > 1}
         copyTable={() => ({ columns: keys.map ((_, index) => ({ label: headingRows[0][index] })),
             headerRows: headingRows, rows: matrix })}
         identity={`${countsRequestParams (params)}:${JSON.stringify (keys)}`}