#399

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -2,10 +2,11 @@ import DateTimeField from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
 
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 
 type Props = {
     disabled?:                boolean
+    labelAddon?:              ReactNode
     originalCreatedFrom:      string | null
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
@@ -15,18 +16,25 @@ type Props = {
 
 const PostOriginalCreatedTimeField: FC<Props> = (
     { disabled,
+      labelAddon,
       originalCreatedFrom,
       setOriginalCreatedFrom,
       originalCreatedBefore,
       setOriginalCreatedBefore,
       errors }: Props) => (
-    <FormField label="オリジナルの作成日時" messages={errors}>
+    <FormField
+	label={
+	    <span className="flex items-center gap-2">
+	      <span>オリジナルの作成日時</span>
+	      {labelAddon}
+	    </span>}
+	messages={errors}>
       {({ describedBy, invalid }) => (
 	  <>
-	    <div className="my-1 flex">
-	      <div className="w-80">
+	    <div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
+	      <div className="min-w-0 flex-1">
 		<DateTimeField
-		    className="mr-2"
+		    className="w-full"
 		    disabled={disabled ?? false}
 		    aria-describedby={describedBy}
 		    aria-invalid={invalid}
@@ -49,6 +57,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      </div>
 	      <div>
 		<Button
+		    type="button"
 		    className="bg-gray-600 text-white rounded"
 		    disabled={disabled}
 		    onClick={() => {
@@ -59,10 +68,10 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      </div>
 	    </div>
 
-	    <div className="my-1 flex">
-	      <div className="w-80">
+	    <div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
+	      <div className="min-w-0 flex-1">
 		<DateTimeField
-		    className="mr-2"
+		    className="w-full"
 		    disabled={disabled}
 		    aria-describedby={describedBy}
 		    aria-invalid={invalid}
@@ -73,6 +82,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      </div>
 	      <div>
 		<Button
+		    type="button"
 		    className="bg-gray-600 text-white rounded"
 		    disabled={disabled}
 		    onClick={() => {