#428

frontend/src/components/SortHeader.tsx

@@ -25,9 +25,9 @@ export default <T extends string,>({ by, label, currentOrder, defaultDirection }
       <PrefetchLink
 	  className="text-inherit visited:text-inherit hover:text-inherit"
 	  to={`${ location.pathname }?${ qs.toString () }`}>
-	<span className="font-bold">
+	<span className="inline-flex w-max items-baseline gap-1 whitespace-nowrap font-bold">
 	  {label}
-	  {by === fld && (dir === 'asc' ? ' ▲' : ' ▼')}
+	  {by === fld && <span className="shrink-0">{dir === 'asc' ? '▲' : '▼'}</span>}
 	</span>
       </PrefetchLink>)
 }

frontend/src/pages/tags/TagListPage.tsx

@@ -217,7 +217,7 @@ const TagListPage: FC = () => {
   }), [page, totalPages, location.search]))
 
   return (
-      <MainArea>
+      <MainArea className="min-w-0">
 	<Helmet>
 	  <title>{message ('title').text} | {SITE_TITLE}</title>
 	</Helmet>
@@ -357,22 +357,11 @@ const TagListPage: FC = () => {
 
 	{isError && <p role="alert">{label ('common:fetchError')}</p>}
 	{loading ? label ('common:loading') : (results.length > 0 ? (
-	    <div className="mt-4">
+	    <div className="mt-4 min-w-0 max-w-full">
-	      <div className="overflow-x-auto">
+	      <div className="min-w-0 max-w-full overflow-x-auto">
-		<table className="w-full min-w-[2000px] table-fixed border-collapse">
+		<table className="w-full table-auto border-collapse">
-		  <colgroup>
+		  <thead className="border-b-2 border-black dark:border-white
-		    <col className="w-72"/>
+				    [&_.ainu-ui-text]:!whitespace-nowrap [&_wbr]:hidden">
-		    <col className="w-16"/>
-		    <col className="w-48"/>
-		    <col className="w-32"/>
-		    <col className="w-72"/>
-		    <col className="w-48"/>
-		    <col className="w-56"/>
-		    <col className="w-56"/>
-		    <col className="w-16"/>
-		  </colgroup>
-
-		  <thead className="border-b-2 border-black dark:border-white">
 		    <tr>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchTagsOrderField>
@@ -428,12 +417,14 @@ const TagListPage: FC = () => {
 			    key={`${ row.category }:${ row.id }`}
 			    className="even:bg-gray-100 dark:even:bg-gray-700">
 			  <td className="p-2">
-			    <TagLink
+			    <div className="max-w-[24rem]">
-				tag={row}
+			      <TagLink
-				to={row.category === 'nico'
+				  tag={row}
-				    ? `/tags/nico?name=${ encodeURIComponent (row.name) }`
+				  to={row.category === 'nico'
-				    : `/tags/${ encodeURIComponent (row.id) }`}
+				      ? `/tags/nico?name=${ encodeURIComponent (row.name) }`
-				withCount={false}/>
+				      : `/tags/${ encodeURIComponent (row.id) }`}
+				  withCount={false}/>
+			    </div>
 			  </td>
 			  <td className="p-2 text-right">{row.postCount}</td>
 			  <td className="p-2">
@@ -442,15 +433,21 @@ const TagListPage: FC = () => {
 			  <td className="p-2">
 			    {row.deprecatedAt ? label ('common:states.deprecated') : ''}
 			  </td>
-			  <td className="p-2">{row.aliases.join (' ')}</td>
 			  <td className="p-2">
-			    {row.parents.map (t => (
+			    <div className="max-w-[24rem] [overflow-wrap:anywhere]">
-				<span key={t.id} className="mr-2">
+			      {row.aliases.join (' ')}
-				  <TagLink
+			    </div>
-				      tag={t}
+			  </td>
-				      withWiki={false}
+			  <td className="p-2">
-				      withCount={false}/>
+			    <div className="max-w-[24rem]">
-				</span>))}
+			      {row.parents.map (t => (
+				  <span key={t.id} className="mr-2 inline-block max-w-full">
+				    <TagLink
+					tag={t}
+					withWiki={false}
+					withCount={false}/>
+				  </span>))}
+			    </div>
 			  </td>
 			  <td className="p-2">
 			    <time dateTime={row.createdAt} lang={locale}>