#428

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -27,66 +27,64 @@ const PostOriginalCreatedTimeField: FC<Props> = (
       <FormField label={label ('labels.originalCreatedAt')} messages={errors}>
 	  {({ describedBy, invalid }) => (
 	      <>
-		<div className="my-1 flex">
-		  <div className="w-80">
-		    <DateTimeField
-			className="mr-2"
-			disabled={disabled ?? false}
-			aria-describedby={describedBy}
-			aria-invalid={invalid}
-			invalid={invalid}
-			value={originalCreatedFrom ?? undefined}
-			onChange={setOriginalCreatedFrom}
-			onBlur={ev => {
-			  const v = ev.target.value
-			  if (!(v))
-			    return
+		<div className="my-1 flex min-w-0 flex-wrap items-center gap-2">
+		  <DateTimeField
+		      className="min-w-0 max-w-full"
+		      disabled={disabled ?? false}
+		      aria-describedby={describedBy}
+		      aria-invalid={invalid}
+		      invalid={invalid}
+		      value={originalCreatedFrom ?? undefined}
+		      onChange={setOriginalCreatedFrom}
+		      onBlur={ev => {
+			const v = ev.target.value
+			if (!(v))
+			  return
 
-			  const d = new Date (v)
-			  if (d.getMinutes () === 0 && d.getHours () === 0)
-			    d.setDate (d.getDate () + 1)
-			  else
-			    d.setMinutes (d.getMinutes () + 1)
-			  setOriginalCreatedBefore (toMinutePrecisionIsoUtc (d.toISOString ()))
-			}}/>
+			const d = new Date (v)
+			if (d.getMinutes () === 0 && d.getHours () === 0)
+			  d.setDate (d.getDate () + 1)
+			else
+			  d.setMinutes (d.getMinutes () + 1)
+			setOriginalCreatedBefore (toMinutePrecisionIsoUtc (d.toISOString ()))
+		      }}/>
+		  <span className="ainu-ui-label shrink-0 whitespace-nowrap">
 		    {label ('labels.since')}
-		  </div>
-		  <div>
-		    <Button
-			type="button"
-			className="bg-gray-600 text-white rounded"
-			disabled={disabled}
-			onClick={() => {
-			  setOriginalCreatedFrom (null)
-			}}>
-		      {label ('actions.reset')}
-		    </Button>
-		  </div>
+		  </span>
+		  <Button
+		      type="button"
+		      className="ainu-ui-label shrink-0 rounded bg-gray-600 text-white
+				 dark:bg-gray-600 dark:text-white"
+		      disabled={disabled}
+		      onClick={() => {
+			setOriginalCreatedFrom (null)
+		      }}>
+		    {label ('actions.reset')}
+		  </Button>
 		</div>
 
-		<div className="my-1 flex">
-		  <div className="w-80">
-		    <DateTimeField
-			className="mr-2"
-			disabled={disabled}
-			aria-describedby={describedBy}
-			aria-invalid={invalid}
-			invalid={invalid}
-			value={originalCreatedBefore ?? undefined}
-			onChange={setOriginalCreatedBefore}/>
+		<div className="my-1 flex min-w-0 flex-wrap items-center gap-2">
+		  <DateTimeField
+		      className="min-w-0 max-w-full"
+		      disabled={disabled}
+		      aria-describedby={describedBy}
+		      aria-invalid={invalid}
+		      invalid={invalid}
+		      value={originalCreatedBefore ?? undefined}
+		      onChange={setOriginalCreatedBefore}/>
+		  <span className="ainu-ui-label shrink-0 whitespace-nowrap">
 		    {label ('labels.before')}
-		  </div>
-		  <div>
-		    <Button
-			type="button"
-			className="bg-gray-600 text-white rounded"
-			disabled={disabled}
-			onClick={() => {
-			  setOriginalCreatedBefore (null)
-			}}>
-		      {label ('actions.reset')}
-		    </Button>
-		  </div>
+		  </span>
+		  <Button
+		      type="button"
+		      className="ainu-ui-label shrink-0 rounded bg-gray-600 text-white
+				 dark:bg-gray-600 dark:text-white"
+		      disabled={disabled}
+		      onClick={() => {
+			setOriginalCreatedBefore (null)
+		      }}>
+		    {label ('actions.reset')}
+		  </Button>
 		</div>
 	      </>)}
       </FormField>)