AI: address review on PR #476

frontend/src/components/posts/PostTextField.tsx

@@ -34,18 +34,22 @@ const PostTextField: FC<Props> = (
     <FormField label={label} messages={errors}>
       {({ describedBy, invalid }) => (
           <>
-            <input
-                type={type}
-                value={value}
-                disabled={disabled}
-                placeholder={placeholder}
-                onBlur={onBlur}
-                onChange={ev => onChange (ev.target.value)}
-                aria-describedby={describedBy}
-                aria-invalid={invalid}
-                className={inputClass (invalid, className)}/>
-            <FieldWarning messages={warnings}/>
-            {after}
+	    <div className="flex items-center gap-2">
+	      <div className="min-w-0 flex-1">
+		<input
+		    type={type}
+		    value={value}
+		    disabled={disabled}
+		    placeholder={placeholder}
+		    onBlur={onBlur}
+		    onChange={ev => onChange (ev.target.value)}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    className={inputClass (invalid, className)}/>
+	      </div>
+	      {after}
+	    </div>
+	    <FieldWarning messages={warnings}/>
           </>)}
     </FormField>)
 

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -97,19 +97,19 @@ const MaterialHistoryPage: FC = () => {
 	    <div className="space-y-3">
 	      <FormField label={label ('materialId')}>
 		{({ invalid }) => (
-		    <>
+		    <div className="flex items-center gap-2">
 		      <input
 			type="text"
 			value={materialIdInput}
 			aria-label={message ('materialId').text}
 			lang={message ('materialId').language}
 			onChange={e => setMaterialIdInput (e.target.value)}
-			className={inputClass (invalid)}/>
+			className={inputClass (invalid, 'min-w-0 flex-1')}/>
 		      <ResourcePickerButton
 			source={{ resource: 'materials', field: 'resource_id' }}
 			values={materialIdInput === '' ? [] : [materialIdInput]}
 			onSelect={values => setMaterialIdInput (values[0] ?? '')}/>
-		    </>)}
+		    </div>)}
 	      </FormField>
 
 	      <FormField label={label ('tagName')}>

frontend/src/pages/materials/MaterialSyncSuppressionsPage.tsx

@@ -127,17 +127,17 @@ const MaterialSyncSuppressionsPage: FC = () => {
 
 	      <FormField label={label ('suppressions.driveFileId')}>
 		{({ invalid }) => (
-		    <>
+		    <div className="flex items-center gap-2">
 		      <input
 			type="text"
 			value={driveFileId}
 			onChange={e => setDriveFileId (e.target.value)}
-			className={inputClass (invalid)}/>
+			className={inputClass (invalid, 'min-w-0 flex-1')}/>
 		      <ResourcePickerButton
 			source={{ resource: 'materials', field: 'drive_file_id' }}
 			values={driveFileId === '' ? [] : [driveFileId]}
 			onSelect={values => setDriveFileId (values[0] ?? '')}/>
-		    </>)}
+		    </div>)}
 	      </FormField>
 
 	      <FormField label={label ('suppressions.reason')}>