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'}})

frontend/src/index.css

@@ -662,6 +662,18 @@ html:lang(mn-Mong) [style*='writing-mode']
   writing-mode: vertical-lr !important;
 }
 
+/* Inline alignment turns left/right into top/bottom; flex cross alignment
+   and table vertical-align already follow the vertical writing mode. */
+html:lang(mn-Mong) .text-left
+{
+  text-align: start;
+}
+
+html:lang(mn-Mong) .text-right
+{
+  text-align: end;
+}
+
 [data-vertical-preview]
 {
   min-width: 0;
@@ -914,9 +926,10 @@ html:lang(mn-Mong) [style*='writing-mode']
 [data-vertical-preview] .tag-list-filter
 {
   flex: none;
-  width: min(24rem, 75vw);
-  max-width: none;
-  overflow-y: auto;
+  width: auto;
+  inline-size: min(24rem, 100%);
+  max-inline-size: none;
+  overflow: auto;
 }
 
 [data-vertical-preview] .tag-list-filter h1
@@ -929,7 +942,7 @@ html:lang(mn-Mong) [style*='writing-mode']
 
 [data-vertical-preview] .tag-list-filter input[type='number']
 {
-  max-width: 7rem;
+  max-inline-size: 7rem;
 }
 
 [data-vertical-preview] .tag-list-results
@@ -966,7 +979,6 @@ html:lang(mn-Mong) [style*='writing-mode']
 {
   min-inline-size: 2rem;
   max-inline-size: 16rem;
-  text-align: start;
 }
 
 [data-vertical-preview] .tag-list-table thead

frontend/src/lib/utils.ts

@@ -152,7 +152,7 @@ export const msToTime = (ms: number): string => {
 
 
 export const inputClass = (invalid?: boolean, className?: string): string =>
-    cn ('w-full rounded border p-2',
+    cn ('[inline-size:100%] rounded border p-2',
 	(invalid
 	 ? ['border-red-500 bg-red-50 text-red-900',
 	    'placeholder:text-red-300',