frontend/src/components/MaterialSidebar.tsx

@@ -318,12 +318,20 @@ const MobileMaterialTreeNode: FC<{ depth?: number
 	    <TagLink
 		tag={sidebarTagToTag (tag)}
 		title={tag.name}
+		truncateOnMobile
 		withCount={false}
 		withWiki={false}
 		to={materialPath (tag.id, materialFilter)}
 		className="block overflow-hidden text-ellipsis whitespace-nowrap
 			   [max-inline-size:var(--tag-link-inline-size)]
-			   [max-height:var(--tag-link-inline-size)]"/>
+			   [max-height:var(--tag-link-inline-size)]
+			   [&_.tag-marquee]:block
+			   [&_.tag-marquee]:h-full
+			   [&_.tag-marquee]:overflow-hidden
+			   [&_.tag-marquee__static]:h-full
+			   [&_.tag-marquee__static]:overflow-hidden
+			   [&_.tag-marquee__static]:text-ellipsis
+			   [&_.tag-marquee__static]:[text-overflow:ellipsis]"/>
 	  </div>
 	  {tag.hasChildren && (
 	      <button

frontend/src/components/ResponsiveMarqueeText.tsx

@@ -6,6 +6,7 @@ import type { FC } from 'react'
 type Props = {
     text:      string
     className?: string
+    truncateOnMobile?: boolean
     title?:    string }
 
 const DESKTOP_MARQUEE_MEDIA =
@@ -16,7 +17,9 @@ const MARQUEE_SCROLL_PX_PER_SECOND = 43
 const MIN_MARQUEE_OVERFLOW_PX = 1
 
 
-const ResponsiveMarqueeText: FC<Props> = ({ text, className, title }) => {
+const ResponsiveMarqueeText: FC<Props> = (
+    { text, className, truncateOnMobile = false, title },
+) => {
   const outerRef = useRef<HTMLSpanElement | null> (null)
   const staticRef = useRef<HTMLSpanElement | null> (null)
   const animatedRef = useRef<HTMLSpanElement | null> (null)
@@ -216,14 +219,18 @@ const ResponsiveMarqueeText: FC<Props> = ({ text, className, title }) => {
 	  onBlur={() => setActive (false)}
 	  className={cn (
 	      'tag-marquee inline-block max-w-full min-w-0 align-bottom',
-	      'whitespace-normal [overflow-wrap:anywhere]',
+	      (truncateOnMobile
+	       ? 'overflow-hidden text-ellipsis whitespace-nowrap'
+	       : 'whitespace-normal [overflow-wrap:anywhere]'),
 	      'md:overflow-hidden md:whitespace-nowrap',
 	      className)}>
 	<span
 	    ref={staticRef}
 	    className={cn (
 		'tag-marquee__static block max-w-full',
-		'whitespace-normal [overflow-wrap:anywhere]',
+		(truncateOnMobile
+		 ? 'overflow-hidden text-ellipsis whitespace-nowrap'
+		 : 'whitespace-normal [overflow-wrap:anywhere]'),
 		'md:overflow-hidden md:text-ellipsis md:whitespace-nowrap',
 		marqueeVisible && 'md:opacity-0')}>
 	  {text}

frontend/src/components/TagLink.tsx

@@ -10,6 +10,7 @@ import type { Tag } from '@/types'
 type CommonProps = { 
     tag:        Tag
     nestLevel?: number
+    truncateOnMobile?: boolean
     withWiki?:  boolean
     withCount?: boolean }
 
@@ -31,6 +32,7 @@ type Props =
 const TagLink: FC<Props> = ({ tag,
 			      nestLevel = 0,
 			      linkFlg   = true,
+			      truncateOnMobile = false,
 			      withWiki  = true,
 			      withCount = true,
 			      className,
@@ -119,7 +121,10 @@ const TagLink: FC<Props> = ({ tag,
 		  title={textTitle}
 		  className={cn (spanClass, textClass, className)}
 		  {...props}>
-		<ResponsiveMarqueeText text={tag.matchedAlias} title={textTitle}/>
+		<ResponsiveMarqueeText
+		    text={tag.matchedAlias}
+		    title={textTitle}
+		    truncateOnMobile={truncateOnMobile}/>
 	      </span>
 	      <span className="shrink-0"> → </span>
 	    </>)}
@@ -130,14 +135,20 @@ const TagLink: FC<Props> = ({ tag,
 		title={textTitle}
 		className={cn (linkClass, textClass, className)}
 		{...props}>
-	      <ResponsiveMarqueeText text={tag.name} title={textTitle}/>
+	      <ResponsiveMarqueeText
+		  text={tag.name}
+		  title={textTitle}
+		  truncateOnMobile={truncateOnMobile}/>
 	    </PrefetchLink>)
 	 : (
 	    <span
 		  title={textTitle}
 		  className={cn (spanClass, textClass, className)}
 		  {...props}>
-	      <ResponsiveMarqueeText text={tag.name} title={textTitle}/>
+	      <ResponsiveMarqueeText
+		  text={tag.name}
+		  title={textTitle}
+		  truncateOnMobile={truncateOnMobile}/>
 	    </span>)}
 	{withCount && (
 	    <span className={countClass}>{tag.postCount}</span>)}