frontend/src/components/TagLink.tsx

@@ -43,14 +43,18 @@ const TagLink: FC<Props> = ({ tag,
       spanClass,
       `hover:text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE - 200 }`,
       `dark:hover:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE - 200 }`)
-  const textClass = 'group inline-block min-w-0 max-w-full align-bottom'
+  const textClass = 'group min-w-0 max-w-full overflow-hidden align-bottom'
+  const rootClass =
+      'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline gap-x-1 md:items-baseline'
+  const markerWrapClass = 'shrink-0 self-start md:self-auto'
+  const countClass = 'shrink-0 self-end md:self-auto'
   const textTitle = title
       ?? (tag.matchedAlias == null ? tag.name : `${ tag.matchedAlias } → ${ tag.name }`)
 
   return (
-      <>
+      <span className={rootClass}>
 	{(linkFlg && withWiki) && (
-	    <span className="mr-1 shrink-0">
+	    <span className={markerWrapClass}>
 	      {(tag.materialId != null || tag.hasWiki || tag.hasDeerjikists)
 	       ? (
 		  tag.materialId == null && !(tag.hasDeerjikists)
@@ -117,7 +121,7 @@ const TagLink: FC<Props> = ({ tag,
 		  {...props}>
 		<ResponsiveMarqueeText text={tag.matchedAlias} title={textTitle}/>
 	      </span>
-	      <> → </>
+	      <span className="shrink-0"> → </span>
 	    </>)}
 	{linkFlg
 	 ? (
@@ -136,8 +140,8 @@ const TagLink: FC<Props> = ({ tag,
 	      <ResponsiveMarqueeText text={tag.name} title={textTitle}/>
 	    </span>)}
 	{withCount && (
-	    <span className="ml-1 shrink-0">{tag.postCount}</span>)}
+	    <span className={countClass}>{tag.postCount}</span>)}
-      </>)
+      </span>)
 }
 
 export default TagLink