fix modal align

Author: wxiaoguang

templates/devtest/fomantic-modal.tmpl

@@ -49,6 +49,16 @@
 		</form>
 	</div>
 
+	<div id="test-modal-form-5" class="ui mini modal">
+		<div class="header">Form dialog (layout 5)</div>
+		<div class="content">
+			<form method="post">
+				<div class="ui input tw-w-full"><input name="user_input"></div>
+				{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+			</form>
+		</div>
+	</div>
+
 	<div class="ui g-modal-confirm modal" id="test-modal-default">
 		<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
 		<div class="content">

web_src/css/modules/modal.css

@@ -63,18 +63,16 @@ These inconsistent layouts should be refactored to simple ones.
   background: var(--color-secondary-bg);
   border-color: var(--color-secondary);
   padding: 1rem;
+  text-align: right;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
+.ui.modal .content > form > .actions,
 .ui.modal .content > .actions {
   padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
   text-align: right;
 }
 
-.ui.modal .actions {
-  text-align: right;
-}
-
 /* positive/negative action buttons */
 .ui.modal .actions > .ui.button {
   display: inline-flex;