AI: address review on PR #475

frontend/src/components/TagLink.tsx

@@ -79,7 +79,9 @@ const TagLink: FC<Props> = ({ tag,
   } as CSSProperties
   const spanClass = 'tag-link-colour'
   const linkClass = 'tag-link-colour tag-link-hover-colour'
-  const textClass = 'group min-w-0 max-w-full overflow-hidden align-bottom'
+  const textClass = cn (
+      'group [min-inline-size:0] [max-inline-size:100%]',
+      'overflow-hidden align-bottom')
   const markerWrapClass = 'shrink-0 self-start md:self-auto'
   const countClass = 'shrink-0 self-end md:self-auto'
   const matchedAlias = isFullTag (tag) ? tag.matchedAlias : null
@@ -89,7 +91,8 @@ const TagLink: FC<Props> = ({ tag,
   return (
       <span
 	  className={cn (
-	      'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline',
+	      'inline-flex [min-inline-size:0] [max-inline-size:100%] flex-nowrap',
+	      'items-stretch align-baseline',
 	      'gap-x-1 md:items-baseline')}>
 	{(linkFlg && withWiki && isFullTag (tag) && tag.category !== 'nico') && (
 	    <span className={markerWrapClass}>
@@ -153,8 +156,8 @@ const TagLink: FC<Props> = ({ tag,
 	    </span>)}
 	{nestLevel > 0 && (
 	    <span
-		className="ml-1 mr-1 shrink-0"
-		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
+		className="ms-1 me-1 shrink-0"
+		style={{ paddingInlineStart: `${ (nestLevel - 1) }rem` }}>
 	      ↳
 	    </span>)}
 	{matchedAlias != null && (

frontend/src/components/common/TextArea.tsx

@@ -12,7 +12,7 @@ export default forwardRef<HTMLTextAreaElement, Props> (
 	<textarea
 	    ref={ref}
 	    aria-invalid={invalid}
-	    className={cn ('rounded border w-full p-2 h-32',
+	    className={cn ('rounded border [inline-size:100%] p-2 [block-size:8rem]',
 			   (invalid
 			    ? ['border-red-500 bg-red-50 text-red-900',
 			       'focus:border-red-500 focus:outline-none focus:ring-2',

frontend/src/components/ui/button.tsx

@@ -32,10 +32,10 @@ const buttonVariants = cva (
 	link:
 	  'text-blue-700 underline-offset-4 hover:underline dark:text-blue-300'},
       size: {
-	default: 'h-10 px-4 py-2',
-	sm:      'h-9 rounded-md px-3',
-	lg:      'h-11 rounded-md px-8',
-	icon:    'h-10 w-10'}},
+	default: '[block-size:2.5rem] [padding-inline:1rem] [padding-block:.5rem]',
+	sm:      '[block-size:2.25rem] rounded-md [padding-inline:.75rem]',
+	lg:      '[block-size:2.75rem] rounded-md [padding-inline:2rem]',
+	icon:    '[block-size:2.5rem] [inline-size:2.5rem]'}},
     defaultVariants: {
       variant: 'default',
       size:    'default'}})