frontend/src/components/dialogues/DialogueProvider.tsx

@@ -153,6 +153,15 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       [closeRequest, pendingIds])
 
   const active = queue[0]
+  const startActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action => action.placement === 'start')
+      : []
+  const endActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action =>
+	  action.placement == null || action.placement === 'end')
+      : []
 
   return (
       <DialogueContext.Provider value={api}>
@@ -204,16 +213,9 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 				 confirm: options => openNestedConfirm (active.id, options) })}
 		       </div>
 
-		       <DialogFooter className="shrink-0 pt-4">
-			 <Button
-			     variant="outline"
-			     onClick={() => closeRequest (active.id)}
-			     disabled={pendingIds.includes (active.id)
-				 || nestedConfirm?.parentId === active.id}>
-			   {active.options.cancelText ?? '取消'}
-			 </Button>
-
-			 {(formActions[active.id] ?? []).map (action => (
+		       <DialogFooter className="shrink-0 pt-4 sm:justify-between">
+			 <div className="flex flex-wrap gap-2">
+			   {startActions.map (action => (
 			       <Button
 				   key={action.label}
 				   variant={action.variant === 'danger'
@@ -225,6 +227,30 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 				       || action.disabled}>
 				 {action.label}
 			       </Button>))}
+			 </div>
+
+			 <div className="flex flex-wrap justify-end gap-2">
+			   <Button
+			       variant="outline"
+			       onClick={() => closeRequest (active.id)}
+			       disabled={pendingIds.includes (active.id)
+				   || nestedConfirm?.parentId === active.id}>
+			     {active.options.cancelText ?? '取消'}
+			   </Button>
+
+			   {endActions.map (action => (
+			       <Button
+				   key={action.label}
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
 		       </DialogFooter>
 		     </>)
 		 : (

frontend/src/components/posts/import/PostImportRowForm.tsx

@@ -137,6 +137,7 @@ const PostImportRowForm: FC<Props> = (
   useEffect (() => {
     controls.setActions ([{
 	label: '変更をリセット',
+	placement: 'start',
 	variant: 'danger',
 	disabled: resetDisabled,
 	onSelect: reset },

frontend/src/lib/dialogues/useDialogue.ts

@@ -25,6 +25,7 @@ type ChoiceOptions<T extends string> = { title:         string
 
 type DialogueFormAction = {
   label:      string
+  placement?: 'start' | 'end'
   variant?:   DialogueVariant
   disabled?:  boolean
   onSelect:   () => Promise<boolean | void> | boolean | void }