refactor(ui): modal padding via Bootstrap container, drop msbackup class

Per feedback, wrap the destination modal content in a Bootstrap .container-fluid
and give that a 1rem frame in the WAM stylesheet, instead of a custom
.msbackup class on .modal-content. Inner header/body/footer drop their own
horizontal padding so the frame isn't doubled.

Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i

CHANGELOG.md

@@ -6,7 +6,7 @@
 - SFTP destinations: **upload an SSH private key file** in the Add/Edit Destination modal instead of pasting it (reads the file into the key field client-side; pasting still works).
 
 ### Changed
-- Add/Edit Destination modal: give `.modal-content` a `msbackup` class with a 1rem padding frame (Bootstrap's `.modal-content` has no padding of its own), styled in the WAM stylesheet.
+- Add/Edit Destination modal: wrap the content in a Bootstrap `.container-fluid` and give it a 1rem padding frame via the WAM stylesheet (Bootstrap's `.modal-content` has no padding of its own).
 
 ### Fixed
 - Pre-update backup now shows an admin notification on **every** outcome (success / warning / failure) — previously a *successful* pre-update backup fired nothing, so it looked like the notification wasn't working. (#192)

source/packages/com_mokosuitebackup/media/css/admin.css

@@ -3,35 +3,31 @@
  */
 
 /* Add/Edit Destination modal.
- * Bootstrap's .modal-content has no padding of its own (its header/body/footer
- * children provide it), which made the modal feel cramped against its border.
- * Give the container a comfortable 1rem frame via the .msbackup namespace and let
- * the inner sections align to it (no double horizontal padding). */
-.modal-content.msbackup {
+ * The modal content is wrapped in a Bootstrap .container-fluid because
+ * Bootstrap's .modal-content has no padding of its own. Give that container a
+ * single, comfortable 1rem frame and drop the inner sections' horizontal padding
+ * so it isn't doubled. */
+#remoteModal .modal-content > .container-fluid {
 	padding: 1rem;
 }
 
-.modal-content.msbackup .modal-header,
-.modal-content.msbackup .modal-body,
-.modal-content.msbackup .modal-footer {
+#remoteModal .modal-header,
+#remoteModal .modal-body,
+#remoteModal .modal-footer {
 	padding-left: 0;
 	padding-right: 0;
 }
 
-.modal-content.msbackup .modal-body .row + .row,
-.modal-content.msbackup .remote-type-fields {
+#remoteModal .modal-body .row + .row,
+#remoteModal .remote-type-fields {
 	margin-top: 0.25rem;
 }
 
-.modal-content.msbackup hr {
+#remoteModal hr {
 	margin: 1rem 0;
 	opacity: 0.12;
 }
 
-.modal-content.msbackup .form-label {
+#remoteModal .form-label {
 	margin-bottom: 0.35rem;
 }
-
-.modal-content.msbackup .form-check.form-switch {
-	padding-top: 0.15rem;
-}

source/packages/com_mokosuitebackup/tmpl/profile/edit.php

@@ -123,7 +123,8 @@ $token     = Session::getFormToken();
 <?php if ($profileId): ?>
 <div class="modal fade" id="remoteModal" tabindex="-1" aria-labelledby="remoteModalLabel" aria-hidden="true">
 	<div class="modal-dialog modal-lg">
-		<div class="modal-content msbackup">
+		<div class="modal-content">
+			<div class="container-fluid">
 			<div class="modal-header">
 				<h5 class="modal-title" id="remoteModalLabel"><?php echo Text::_('COM_MOKOJOOMBACKUP_REMOTE_ADD'); ?></h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<?php echo Text::_('JCLOSE'); ?>"></button>
@@ -262,6 +263,7 @@ $token     = Session::getFormToken();
 					<?php echo Text::_('JAPPLY'); ?>
 				</button>
 			</div>
+			</div>
 		</div>
 	</div>
 </div>