From 2c639749cc500e81cac2f21396554303e448014b Mon Sep 17 00:00:00 2001
From: varjolintu <sami.vanttinen@varjolintu.fi>
Date: Fri, 16 May 2025 20:11:49 +0300
Subject: [PATCH 1/2] Styling improvements

---
 keepassxc-browser/_locales/en/messages.json |  2 +-
 keepassxc-browser/options/options.css       | 40 +++++++++---
 keepassxc-browser/options/options.html      | 69 +++++++++++----------
 3 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/keepassxc-browser/_locales/en/messages.json b/keepassxc-browser/_locales/en/messages.json
index 7a9e078..b6f96c2 100644
--- a/keepassxc-browser/_locales/en/messages.json
+++ b/keepassxc-browser/_locales/en/messages.json
@@ -20,7 +20,7 @@
         "description": "Connect button title text."
     },
     "copyDebugInfoButtonTitle": {
-        "message": "Copy debug info to clipboard.",
+        "message": "Copy debug info to clipboard",
         "description": "Copy debug info button title text on About tab."
     },
     "dismissHttpAuthButtonTitle": {
diff --git a/keepassxc-browser/options/options.css b/keepassxc-browser/options/options.css
index b0dbe4a..01dcf63 100644
--- a/keepassxc-browser/options/options.css
+++ b/keepassxc-browser/options/options.css
@@ -43,6 +43,14 @@ input[type="range"] {
     color: var(--kpxc-text-color) !important;
 }
 
+input[type="range"]::-moz-range-thumb {
+    background-color: green;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    background-color: green;
+}
+
 input:active {
     border-color: var(--kpxc-input-active-border-color);
 }
@@ -74,19 +82,14 @@ pre {
     white-space: pre-line;
 }
 
-.table,
-tbody,
-thead,
-tr,
-th,
-td {
-    border-color: var(--kpxc-table-border-color) !important;
-}
-
 .table > caption {
     color: var(--kpxc-text-color);
 }
 
+.table-sm>:not(caption)>*>* {
+    padding: 0.25rem 0.5rem;
+}
+
 .table > thead,
 tbody {
     color: var(--kpxc-text-color);
@@ -114,7 +117,7 @@ tbody {
 
 .table-striped > tbody > tr:nth-of-type(even) input[type="url"] {
     --bs-table-bg-type: var(--kpxc-card-background-color) !important;
-    background-color: var(--kpxc-card-background-color) !important;
+    background-color: var(--bs-table-bg) !important;
     color: var(--kpxc-text-color) !important;
 }
 
@@ -169,6 +172,10 @@ table td:last-of-type {
     background-color: var(--kpxc-checkbox-color) !important;
 }
 
+.form-switch > .form-check-input:checked {
+    background-color: green !important;
+}
+
 .help-text {
     margin-left: 1.725em;
 }
@@ -209,6 +216,7 @@ table td:last-of-type {
 
 .active > a {
     border-color: currentColor;
+    border-radius: var(--bs-border-radius-sm);
     color: #a0a0a0 !important;
 }
 
@@ -229,6 +237,7 @@ table td:last-of-type {
     border: 0;
     border-bottom-right-radius: 4px !important;
     border-top-right-radius: 4px !important;
+    padding-left: 0;
 }
 
 .site-preferences-input:disabled {
@@ -248,6 +257,17 @@ button#sitePreferencesCancelEdit {
     border-top-left-radius: 4px !important;
 }
 
+.btn-success {
+    --bs-btn-bg: green !important;
+    --bs-btn-border-color: green !important;
+    --bs-btn-hover-bg: green !important;
+    --bs-btn-hover-border-color: green !important;
+}
+
+.btn-success:hover {
+    filter: brightness(88%) !important;
+}
+
 @media (min-width: 768px) {
     .sidebar {
         height: auto;
diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html
index 6bf76e5..47a5582 100644
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@@ -27,7 +27,7 @@
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse d-none d-md-block" id="sidebar">
-            <h1 class="text-uppercase text-white-50 d-none d-md-flex px-3 pb-4 mt-4 mb-1">KeePassXC-Browser</h1>
+            <h1 class="text-uppercase text-white d-none d-md-flex px-3 pb-4 mt-4 mb-1">KeePassXC-Browser</h1>
             <ul class="nav flex-column mb-2 text-uppercase">
               <li class="active nav-item">
                 <a class="nav-link text-light rounded-sm" href="#general-settings">
@@ -62,7 +62,7 @@
             </ul>
           </div>
           <footer class="px-3 mt-4 mb-1 text-uppercase position-absolute small text-muted">
-            © 2017-2024 - KeePassXC Team
+            © 2017-2025 - KeePassXC Team
           </footer>
         </nav>
 
@@ -93,7 +93,7 @@
 
                   <!-- Activate username icons -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showLoginFormIcon" id="usernameIconsCheckBox" value="true">
                       <label class="form-check-label" for="usernameIconsCheckBox" data-i18n="optionsCheckboxUsernameIcons"></label>
                       <div id="passwordHelpBlock" class="form-text" data-i18n="optionsShowLoginFormIconHelpText"></div>
@@ -102,7 +102,7 @@
 
                   <!-- Activate password icons -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="usePasswordGeneratorIcons" id="passwordIconsCheckBox" value="true">
                       <label class="form-check-label" for="passwordIconsCheckBox" data-i18n="optionsCheckboxUsePasswordGenerator"></label>
                       <div class="form-text" data-i18n="optionsUsePasswordGeneratorHelpText"></div>
@@ -112,7 +112,7 @@
 
                   <!-- Activate TOTP icons -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showOTPIcon" id="totpIconsCheckBox" value="true">
                       <label class="form-check-label" for="totpIconsCheckBox" data-i18n="optionsCheckboxOTPIcons"></label>
                       <div class="form-text" data-i18n="optionsShowOTPIconHelpText"></div>
@@ -126,7 +126,7 @@
 
                   <!-- Show notifications -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showNotifications" id="notificationCheckBox" value="true">
                       <label class="form-check-label" for="notificationCheckBox" data-i18n="optionsCheckboxShowNotifications"></label>
                       <div class="form-text" data-i18n="optionsShowNotificationsHelpText"></div>
@@ -135,7 +135,7 @@
 
                   <!-- Use monochrome toolbar icons -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="useMonochromeToolbarIcon" id="useMonochromeToolbarIconCheckBox" value="true">
                       <label class="form-check-label" for="useMonochromeToolbarIconCheckBox" data-i18n="optionsCheckboxUseMonochromeToolbarIcon"></label>
                       <div class="form-text" data-i18n="optionsUseMonochromeToolbarIconHelpText"></div>
@@ -144,7 +144,7 @@
 
                   <!-- Use compact mode -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="useCompactMode" id="useCompactModeCheckBox" value="true">
                       <label class="form-check-label" for="useCompactModeCheckBox" data-i18n="optionsCheckboxUseCompactMode"></label>
                       <div class="form-text" data-i18n="optionsUseCompactModeHelpText"></div>
@@ -185,7 +185,7 @@
 
                   <!-- Automatically retrieve credentials -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoRetrieveCredentials" id="autoRetrieveCredentials" value="true">
                       <label class="form-check-label" for="autoRetrieveCredentials" data-i18n="optionsCheckboxAutoRetrieveCredentials"></label>
                       <div class="form-text" data-i18n="optionsAutoRetrieveCredentialsHelpText"></div>
@@ -194,7 +194,7 @@
 
                   <!-- Use Autocomplete Menu -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoCompleteUsernames" id="autoCompleteUsernames" value="true">
                       <label class="form-check-label" for="autoCompleteUsernames" data-i18n="optionsCheckboxAutoCompleteUsernames"></label>
                       <div class="form-text" data-i18n="optionsAutocompleteUsernamesHelpText"></div>
@@ -222,7 +222,7 @@
                   </div>
                   <div>
                     <span class="form-text text-muted" data-i18n="optionsFillSortPriorityHelpText"></span>
-                    <div class="form-check mt-2">
+                    <div class="form-check form-switch mt-2">
                       <input class="form-check-input" type="checkbox" name="autoFillRelevantCredential" id="autoFillRelevantCredential" value="true">
                       <label class="form-check-label" for="autoFillRelevantCredential" data-i18n="optionsCheckboxAutoFillRelevantCredential"></label>
                       <div class="form-text" data-i18n="optionsAutoFillRelevantCredentialHelpText"></div>
@@ -243,7 +243,7 @@
 
                   <!-- Use Auto-Submit -->
                   <div class="form-group py-2">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoSubmit" id="autoSubmit" value="true">
                       <label class="form-check-label" for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
                       <div class="form-text" data-i18n="optionsAutoSubmitHelpText"></div>
@@ -252,7 +252,7 @@
 
                   <!-- Automatically fill single-credential entries -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoFillSingleEntry" id="autoFillSingleEntry" value="true">
                       <label class="form-check-label" for="autoFillSingleEntry" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
                       <div class="form-text" data-i18n="optionsAutoFillSingleEntryHelpText"></div>
@@ -266,7 +266,7 @@
 
                   <!-- Automatically fill single-credential TOTP fields -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoFillSingleTotp" id="autoFillSingleTotp" value="true">
                       <label class="form-check-label" for="autoFillSingleTotp" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
                       <div class="form-text" data-i18n="optionsAutoFillSingleTotpHelpText"></div>
@@ -275,7 +275,7 @@
 
                   <!-- Autofill HTTP Auth dialogs -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoFillAndSend" id="autoFillAndSend" value="true">
                       <label class="form-check-label" for="autoFillAndSend" data-i18n="optionsCheckboxAutoFillAndSend"></label>
                       <div class="form-text" data-i18n="optionsAutoFillAndSendHelpText"></div>
@@ -296,7 +296,7 @@
 
                   <!-- Show Credential Banner -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showLoginNotifications" id="showLoginNotifications" value="true">
                       <label class="form-check-label" for="showLoginNotifications" data-i18n="optionsCheckboxShowLoginNotifications"></label>
                     </div>
@@ -304,7 +304,7 @@
 
                   <!-- Ask where to save credentials -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="defaultGroupAlwaysAsk" id="defaultGroupAlwaysAsk" value="true">
                       <label class="form-check-label" for="defaultGroupAlwaysAsk" data-i18n="optionsLabelDefaultGroupCheckboxText"></label>
                       <div class="form-text" data-i18n="optionsLabelDefaultGroupCheckboxHelpText"></div>
@@ -330,7 +330,7 @@
 
                   <!-- Save domain only -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="saveDomainOnlyNewCreds" id="saveDomainOnlyNewCreds" value="true">
                       <label class="form-check-label" for="saveDomainOnlyNewCreds" data-i18n="optionsSaveDomainOnly"></label>
                       <div class="form-text" data-i18n="optionsSaveDomainOnlyHelpText"></div>
@@ -339,7 +339,7 @@
 
                   <!-- Download favicon to entry after save -->
                   <div class="form-group" id="downloadFaviconAfterSaveFormGroup">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="downloadFaviconAfterSave" id="downloadFaviconAfterSave" value="true">
                       <label class="form-check-label" for="downloadFaviconAfterSave" data-i18n="optionsDownloadFaviconAfterSave"></label>
                       <div class="form-text" data-i18n="optionsDownloadFaviconAfterSaveHelpText"></div>
@@ -364,7 +364,7 @@
                 <div class="card-body">
                   <!-- Enable Passkeys -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="passkeys" id="passkeys" value="true" />
                       <label class="form-check-label" for="passkeys" data-i18n="optionsPasskeysEnable"></label>
                       <div class="form-text help-text" data-i18n="optionsPasskeysEnableHelpText"></div>
@@ -373,7 +373,7 @@
 
                   <!-- Enable Passkeys fallback -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="passkeysFallback" id="passkeysFallback" value="true" />
                       <label class="form-check-label" for="passkeysFallback" data-i18n="optionsPasskeysEnableFallback"></label>
                       <div class="form-text help-text" data-i18n="optionsPasskeysEnableFallbackHelpText"></div>
@@ -455,7 +455,7 @@
                 <!-- Use dynamic input field detection -->
                 <div class="card-body">
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="useObserver" id="useObserver" value="true">
                       <label class="form-check-label" for="useObserver" data-i18n="optionsUseObserver"></label>
                       <div class="form-text" data-i18n="optionsUseObserverHelpText"></div>
@@ -464,7 +464,7 @@
 
                   <!-- Display group name -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showGroupNameInAutocomplete" id="showGroupNameInAutocomplete" value="true">
                       <label class="form-check-label" for="showGroupNameInAutocomplete" data-i18n="optionsCheckboxShowGroupNameInAutocomplete"></label>
                       <div class="form-text" data-i18n="optionsShowGroupNameInAutocompleteHelpText"></div>
@@ -477,7 +477,7 @@
 
                   <!-- Automatic reconnect -->
                   <div class="form-group" hidden>
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoReconnect" id="autoReconnect" value="true">
                       <label class="form-check-label" for="autoReconnect" data-i18n="optionsCheckboxAutomaticReconnect"></label>
                       <div class="form-text" data-i18n="optionsAutomaticReconnectHelpText"></div>
@@ -490,7 +490,7 @@
 
                   <!-- Save domain only -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="saveDomainOnly" id="saveDomainOnly" value="true">
                       <label class="form-check-label" for="saveDomainOnly" data-i18n="optionsSaveDomainOnly"></label>
                       <div class="form-text" data-i18n="optionsSaveDomainOnlyCustomLoginHelpText"></div>
@@ -499,7 +499,7 @@
 
                   <!-- Use predefined sites -->
                   <div class="form-group">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="usePredefinedSites" id="usePredefinedSites" value="true">
                       <label class="form-check-label" for="usePredefinedSites" data-i18n="optionsUsePredefinedSites"></label>
                       <div class="form-text" data-i18n="optionsUsePredefinedSitesHelpText"></div>
@@ -520,7 +520,7 @@
 
                   <!-- Debug logging -->
                   <div class="form-group mt-2">
-                    <div class="form-check">
+                    <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="debugLogging" id="debugLogging" value="false">
                       <label class="form-check-label" for="debugLogging" data-i18n="optionsDebugLogging"></label>
                       <div class="form-text" data-i18n="optionsDebugLoggingHelpText"></div>
@@ -590,7 +590,7 @@
                           <th scope="col"><span data-i18n="optionsDatabaseKey"></span></th>
                           <th scope="col"><span data-i18n="optionsDatabaseLastUsed"></span></th>
                           <th scope="col"><span data-i18n="optionsDatabaseCreated"></span></th>
-                          <th scope="col"><span data-i18n="optionsDatabaseDelete"></span></th>
+                          <th scope="col"></th>
                         </tr>
                       </thead>
                       <tbody>
@@ -664,7 +664,7 @@
                       <thead>
                         <tr>
                           <th scope="col"><span data-i18n="optionsColumnPageURL"></span></th>
-                          <th scope="col"><span data-i18n="optionsColumnDelete"></span></th>
+                          <th scope="col"></th>
                         </tr>
                       </thead>
                       <tbody>
@@ -674,7 +674,7 @@
                         <tr class="clone d-none">
                           <td></td>
                           <td class="text-nowrap">
-                            <button class="btn btn-sm delete btn-danger btn" data-i18n="[title]removeCustomLoginFieldsButtonTitle">
+                            <button class="btn btn-sm delete btn-danger" data-i18n="[title]removeCustomLoginFieldsButtonTitle">
                               <i class="fa fa-remove" aria-hidden="true"></i>
                               <span data-i18n="optionsButtonRemove"></span>
                             </button>
@@ -730,7 +730,7 @@
                   </div>
                   <hr class="mt-0">
 
-                  <div class="form-group was-validated">
+                  <div class="form-group was-validated pb-3">
                     <label for="manualUrl" data-i18n="optionsSitePreferencesManualAddText"></label>
                     <div class="input-group w-75" id="manualUrlGroup">
                       <input class="form-control form-control-sm" type="url" id="manualUrl" aria-label="Manual URL" pattern="file://.*|ftp://.*|http://.*|https://.*" minlength="5" maxlength="2000" required>
@@ -752,7 +752,7 @@
                           <th scope="col"><span data-i18n="optionsColumnUsernameOnly"></span></th>
                           <th scope="col"><span data-i18n="optionsColumnImprovedInputFieldDetection"></span></th>
                           <th scope="col"><span data-i18n="optionsColumnAllowIframes"></span></th>
-                          <th scope="col"><span data-i18n="optionsColumnDelete"></span></th>
+                          <th scope="col"></th>
                         </tr>
                       </thead>
                       <tbody>
@@ -789,7 +789,7 @@
                           <td><input class="form-check-input" type="checkbox" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection"></td>
                           <td><input class="form-check-input" type="checkbox" name="allowIframes" value="false" data-i18n="[title]optionsColumnAllowIframes"></td>
                           <td class="text-nowrap">
-                            <button class="btn btn-sm delete btn-danger btn" data-i18n="[title]removeSitePreferencesButtonTitle">
+                            <button class="btn btn-sm delete btn-danger" data-i18n="[title]removeSitePreferencesButtonTitle">
                               <i class="fa fa-remove" aria-hidden="true"></i>
                               <span data-i18n="optionsButtonRemove"></span>
                             </button>
@@ -899,8 +899,9 @@
                     <br>Operating system: <span class="kpxcbrOS"></span>
                     <br>Browser: <span class="kpxcbrBrowser"></span>
                   </p>
-                  <button id="copyVersionToClipboard" class="btn btn btn-sm btn-primary ml-3" data-i18n="[title]copyDebugInfoButtonTitle">
+                  <button id="copyVersionToClipboard" class="btn btn-sm btn-primary ml-3" data-i18n="[title]copyDebugInfoButtonTitle">
                     <i class="fa fa-clipboard"></i>
+                    <span data-i18n="copyDebugInfoButtonTitle"></span>
                   </button>
                 </div>
               </div>

From 8c42d7fce5943a1906fcec7b0ef81e9b1f7365c6 Mon Sep 17 00:00:00 2001
From: varjolintu <sami.vanttinen@varjolintu.fi>
Date: Sat, 17 May 2025 13:41:06 +0300
Subject: [PATCH 2/2] Add some more space between options

---
 keepassxc-browser/options/options.html | 64 ++++++++++++++------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html
index 47a5582..28e851d 100644
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@@ -92,7 +92,7 @@
                   </div>
 
                   <!-- Activate username icons -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showLoginFormIcon" id="usernameIconsCheckBox" value="true">
                       <label class="form-check-label" for="usernameIconsCheckBox" data-i18n="optionsCheckboxUsernameIcons"></label>
@@ -101,7 +101,7 @@
                   </div>
 
                   <!-- Activate password icons -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="usePasswordGeneratorIcons" id="passwordIconsCheckBox" value="true">
                       <label class="form-check-label" for="passwordIconsCheckBox" data-i18n="optionsCheckboxUsePasswordGenerator"></label>
@@ -125,7 +125,7 @@
                   </div>
 
                   <!-- Show notifications -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showNotifications" id="notificationCheckBox" value="true">
                       <label class="form-check-label" for="notificationCheckBox" data-i18n="optionsCheckboxShowNotifications"></label>
@@ -134,7 +134,7 @@
                   </div>
 
                   <!-- Use monochrome toolbar icons -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="useMonochromeToolbarIcon" id="useMonochromeToolbarIconCheckBox" value="true">
                       <label class="form-check-label" for="useMonochromeToolbarIconCheckBox" data-i18n="optionsCheckboxUseMonochromeToolbarIcon"></label>
@@ -143,7 +143,7 @@
                   </div>
 
                   <!-- Use compact mode -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="useCompactMode" id="useCompactModeCheckBox" value="true">
                       <label class="form-check-label" for="useCompactModeCheckBox" data-i18n="optionsCheckboxUseCompactMode"></label>
@@ -184,7 +184,7 @@
                 <div class="card-body">
 
                   <!-- Automatically retrieve credentials -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoRetrieveCredentials" id="autoRetrieveCredentials" value="true">
                       <label class="form-check-label" for="autoRetrieveCredentials" data-i18n="optionsCheckboxAutoRetrieveCredentials"></label>
@@ -193,7 +193,7 @@
                   </div>
 
                   <!-- Use Autocomplete Menu -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoCompleteUsernames" id="autoCompleteUsernames" value="true">
                       <label class="form-check-label" for="autoCompleteUsernames" data-i18n="optionsCheckboxAutoCompleteUsernames"></label>
@@ -202,7 +202,7 @@
                   </div>
 
                   <!-- Sort credentials by -->
-                  <div class="form-group col-sm-3 pb-2">
+                  <div class="form-group col-sm-4 pb-1">
                     <label for="credentialSorting" class="py-2" data-i18n="optionsCredentialSortSelectionHeader"></label>
                     <select class="form-select form-select-sm col-md-2" id="credentialSorting" data-i18n="[title]optionsCredentialSortSelection">
                       <option value="sortByTitle" data-i18n="optionsSortByTitle"></option>
@@ -213,15 +213,19 @@
                   </div>
 
                   <!-- Credential sorting after fill -->
-                  <div class="form-group col-sm-3 pb-2">
+                  <div class="form-group col-sm-4 pb-1">
                     <label for="afterFillSorting" class="py-2" data-i18n="optionsFillSortPriority"></label>
                     <select class="form-select form-select-sm col-md-2" id="afterFillSorting" data-i18n="[title]optionsFillSortPriority">
                       <option value="sortByMatchingCredentials" data-i18n="optionsFillSortByMatchingCredentials"></option>
                       <option value="sortByRelevantEntry" data-i18n="optionsFillSortByRelevantEntry"></option>
                     </select>
                   </div>
-                  <div>
+                  <div class="pb-1">
                     <span class="form-text text-muted" data-i18n="optionsFillSortPriorityHelpText"></span>
+                  </div>
+
+                  <!-- Automatically fill in relevant credential entries -->
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch mt-2">
                       <input class="form-check-input" type="checkbox" name="autoFillRelevantCredential" id="autoFillRelevantCredential" value="true">
                       <label class="form-check-label" for="autoFillRelevantCredential" data-i18n="optionsCheckboxAutoFillRelevantCredential"></label>
@@ -230,19 +234,19 @@
                   </div>
 
                   <!-- Credential sorting after fill for TOTP -->
-                  <div class="form-group col-sm-3 pb-2">
+                  <div class="form-group col-sm-4 pb-1">
                     <label for="afterFillSortingTotp" class="py-2" data-i18n="optionsFillSortPriorityTotp"></label>
                     <select class="form-select form-select-sm col-md-2" id="afterFillSortingTotp" data-i18n="[title]optionsFillSortPriorityTotp">
                       <option value="sortByMatchingCredentials" data-i18n="optionsFillSortByMatchingCredentials"></option>
                       <option value="sortByRelevantEntry" data-i18n="optionsFillSortByRelevantEntry"></option>
                     </select>
                   </div>
-                  <div>
+                  <div class="pb-1">
                     <span class="form-text text-muted" data-i18n="optionsFillSortPriorityTotpHelpText"></span>
                   </div>
 
                   <!-- Use Auto-Submit -->
-                  <div class="form-group py-2">
+                  <div class="form-group py-2 pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoSubmit" id="autoSubmit" value="true">
                       <label class="form-check-label" for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
@@ -251,7 +255,7 @@
                   </div>
 
                   <!-- Automatically fill single-credential entries -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoFillSingleEntry" id="autoFillSingleEntry" value="true">
                       <label class="form-check-label" for="autoFillSingleEntry" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
@@ -265,7 +269,7 @@
                   </div>
 
                   <!-- Automatically fill single-credential TOTP fields -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoFillSingleTotp" id="autoFillSingleTotp" value="true">
                       <label class="form-check-label" for="autoFillSingleTotp" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
@@ -274,7 +278,7 @@
                   </div>
 
                   <!-- Autofill HTTP Auth dialogs -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoFillAndSend" id="autoFillAndSend" value="true">
                       <label class="form-check-label" for="autoFillAndSend" data-i18n="optionsCheckboxAutoFillAndSend"></label>
@@ -295,7 +299,7 @@
                 <div class="card-body">
 
                   <!-- Show Credential Banner -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showLoginNotifications" id="showLoginNotifications" value="true">
                       <label class="form-check-label" for="showLoginNotifications" data-i18n="optionsCheckboxShowLoginNotifications"></label>
@@ -303,7 +307,7 @@
                   </div>
 
                   <!-- Ask where to save credentials -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="defaultGroupAlwaysAsk" id="defaultGroupAlwaysAsk" value="true">
                       <label class="form-check-label" for="defaultGroupAlwaysAsk" data-i18n="optionsLabelDefaultGroupCheckboxText"></label>
@@ -329,7 +333,7 @@
                   </div>
 
                   <!-- Save domain only -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="saveDomainOnlyNewCreds" id="saveDomainOnlyNewCreds" value="true">
                       <label class="form-check-label" for="saveDomainOnlyNewCreds" data-i18n="optionsSaveDomainOnly"></label>
@@ -338,7 +342,7 @@
                   </div>
 
                   <!-- Download favicon to entry after save -->
-                  <div class="form-group" id="downloadFaviconAfterSaveFormGroup">
+                  <div class="form-group pb-1" id="downloadFaviconAfterSaveFormGroup">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="downloadFaviconAfterSave" id="downloadFaviconAfterSave" value="true">
                       <label class="form-check-label" for="downloadFaviconAfterSave" data-i18n="optionsDownloadFaviconAfterSave"></label>
@@ -363,7 +367,7 @@
                 </div>
                 <div class="card-body">
                   <!-- Enable Passkeys -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="passkeys" id="passkeys" value="true" />
                       <label class="form-check-label" for="passkeys" data-i18n="optionsPasskeysEnable"></label>
@@ -372,7 +376,7 @@
                   </div>
 
                   <!-- Enable Passkeys fallback -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="passkeysFallback" id="passkeysFallback" value="true" />
                       <label class="form-check-label" for="passkeysFallback" data-i18n="optionsPasskeysEnableFallback"></label>
@@ -423,7 +427,7 @@
                         <span data-i18n="optionsButtonUpdate"></span>
                       </button>
                     <div class="mt-3">
-                      <div data-i18n="optionsRadioText"></div>
+                      <div class="pb-1" data-i18n="optionsRadioText"></div>
                       <div class="form-check form-check-inline">
                         <input class="form-check-input" type="radio" name="checkUpdateKeePassXC" id="checkUpdateThreeDays">
                         <label class="form-check-label" for="checkUpdateThreeDays"><span data-i18n="optionsRadioThreeDays"></span></label>
@@ -454,7 +458,7 @@
 
                 <!-- Use dynamic input field detection -->
                 <div class="card-body">
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="useObserver" id="useObserver" value="true">
                       <label class="form-check-label" for="useObserver" data-i18n="optionsUseObserver"></label>
@@ -463,7 +467,7 @@
                   </div>
 
                   <!-- Display group name -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="showGroupNameInAutocomplete" id="showGroupNameInAutocomplete" value="true">
                       <label class="form-check-label" for="showGroupNameInAutocomplete" data-i18n="optionsCheckboxShowGroupNameInAutocomplete"></label>
@@ -476,7 +480,7 @@
                   </div>
 
                   <!-- Automatic reconnect -->
-                  <div class="form-group" hidden>
+                  <div class="form-group pb-1" hidden>
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="autoReconnect" id="autoReconnect" value="true">
                       <label class="form-check-label" for="autoReconnect" data-i18n="optionsCheckboxAutomaticReconnect"></label>
@@ -489,7 +493,7 @@
                   </div>
 
                   <!-- Save domain only -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="saveDomainOnly" id="saveDomainOnly" value="true">
                       <label class="form-check-label" for="saveDomainOnly" data-i18n="optionsSaveDomainOnly"></label>
@@ -498,7 +502,7 @@
                   </div>
 
                   <!-- Use predefined sites -->
-                  <div class="form-group">
+                  <div class="form-group pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="usePredefinedSites" id="usePredefinedSites" value="true">
                       <label class="form-check-label" for="usePredefinedSites" data-i18n="optionsUsePredefinedSites"></label>
@@ -510,7 +514,7 @@
                   </div>
 
                   <!-- Clear credential timeout -->
-                  <div class="form-group mt-2">
+                  <div class="form-group mt-2 pb-1">
                     <label for="clearCredentialTimeout" data-i18n="optionsClearCredentialsTimeout"></label>
                     <div class="input-group w-25 mt-2">
                       <input class="form-control form-control-sm" type="number" id="clearCredentialTimeout" min="0" max="3600" required>
@@ -519,7 +523,7 @@
                   </div>
 
                   <!-- Debug logging -->
-                  <div class="form-group mt-2">
+                  <div class="form-group mt-2 pb-1">
                     <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" name="debugLogging" id="debugLogging" value="false">
                       <label class="form-check-label" for="debugLogging" data-i18n="optionsDebugLogging"></label>