#428

frontend/src/pages/tags/TagHistoryPage.tsx

@@ -19,7 +19,7 @@ import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { fetchTagChanges } from '@/lib/tags'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { useUITranslation } from '@/lib/useUITranslation'
-import { localisedDateString } from '@/lib/utils'
+import { cn, localisedDateString } from '@/lib/utils'
 
 import type { FC, ReactNode } from 'react'
 
@@ -144,7 +144,7 @@ const renderDiff = <T,> (
 
 const TagVersionRows = ({ change, children }: {
     change: TagVersion
-    children: (primary: ReactNode, toggle: ReactNode) => ReactNode }) => {
+    children: (primary: ReactNode) => ReactNode }) => {
   const locale = useLocale ()
   const language = localeLanguage (locale)
   const { message, label } = useUITranslation ('history')
@@ -169,29 +169,23 @@ const TagVersionRows = ({ change, children }: {
       : ((change.nameChanges != null && change.name.prev === change.name.current)
 	 ? current : legacyName (change.name.prev))
   const missingNameRecord = current?.name == null && previous?.name == null
-  const [expansion, setExpansion] = useState ({ language, expanded: missingNameRecord })
-  const expanded = expansion.language === language ? expansion.expanded : missingNameRecord
   const otherLanguages = [...new Set ([...Object.keys (names),
       ...nameChanges.map (entry => entry.languageCode)])]
       .filter (code => code !== language).sort ()
   const otherChanges = nameChanges.filter (entry => entry.languageCode !== language)
+  const initiallyExpanded = missingNameRecord || otherChanges.length > 0
+  const [expansion, setExpansion] = useState ({ language, expanded: initiallyExpanded })
+  const expanded = expansion.language === language ? expansion.expanded : initiallyExpanded
   const rowIds = otherLanguages.map ((_, index) => `${panelId}-${index}`)
   const primaryEqual = (prev: TagNameSnapshot | null, next: TagNameSnapshot | null) =>
       prev?.name === next?.name && prev?.autoGenerated === next?.autoGenerated
   const primary =
       missingNameRecord
-      ? (
-	  <>
-	    {change.currentNameReference != null && (
-		<div>
-		  {renderPrimaryName (change.currentNameReference, language, label)}
-		  <span className="ml-2 text-sm">{label ('nameChanges.currentReference')}</span>
-		</div>)}
-	  </>)
+      ? null
       : renderDiff ({ current, prev: previous },
 	  snapshot => renderPrimaryName (snapshot, language, label), primaryEqual)
   const toggle = otherLanguages.length > 0 && (
-      <div className="mt-2 text-sm">
+      <div className="text-sm">
 	<button type="button" className="text-left"
 	    aria-expanded={expanded} aria-controls={rowIds.join (' ')}
 	    onClick={() => setExpansion ({ language, expanded: !(expanded) })}>
@@ -204,7 +198,13 @@ const TagVersionRows = ({ change, children }: {
   return (
       <tbody className="even:bg-gray-100 even:text-gray-900
 			dark:even:bg-gray-700 dark:even:text-gray-100">
-	{children (primary, toggle)}
+	{children (primary)}
+	{toggle && (
+	    <tr>
+	      <td colSpan={8} className={cn ('px-2 pt-0', !expanded && 'pb-2')}>
+		{toggle}
+	      </td>
+	    </tr>)}
 	{otherLanguages.map ((code, index) => {
 	  const entry = nameChanges.find (value => value.languageCode === code)
 	  const key = `languageNames.${code}`
@@ -213,18 +213,18 @@ const TagVersionRows = ({ change, children }: {
 	  const prev = entry != null ? entry.prev : next
 	  return (
 	      <tr key={code} id={rowIds[index]} hidden={!expanded}>
-		<th scope="row" className="p-2 text-left text-sm font-normal">
+		<th scope="row" className="px-2 pt-1 pb-2 text-left text-sm font-normal">
 		  <LocalisedText language={known ? code : 'und'}>
 		    {known ? message (key).text : code}
 		  </LocalisedText>
 		</th>
-		<td className="p-2">
+		<td className="px-2 pt-1 pb-2">
 		  {renderDiff ({ current: next, prev },
 		      value => renderPrimaryName (value, code, label), primaryEqual)}
 		</td>
 		<td/>
 		<td/>
-		<td className="p-2">{renderAliasDiff (prev, next, code)}</td>
+		<td className="px-2 pt-1 pb-2">{renderAliasDiff (prev, next, code)}</td>
 		<td/>
 		<td/>
 		<td/>
@@ -310,12 +310,11 @@ const TagHistoryPage: FC = () => {
 
 		  {changes.map (change => (
 		      <TagVersionRows key={`${ change.tagId }.${ change.versionNo }`} change={change}>
-			{(primary, toggle) => (
-			    <tr>
+			{primary => (
+			    <tr className="[&>td]:pt-1">
 			      <td className="p-2">{change.tagId}.{change.versionNo}</td>
 			      <td className="p-2 break-all">
 				{primary}
-				{toggle}
 			      </td>
 			      <td className="p-2 break-all">
 				{renderDiff (change.category,