4 files changed, 19 insertions, 50 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c7ea0e47c8..95f83ef00a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2533,12 +2533,12 @@ a.ui.basic.label:hover {
   right: 0.78571429rem;
   top: 0;
   bottom: 0;
-  height: 30px;
-  margin-top: auto;
-  margin-bottom: auto;
+  display: flex;
+  align-items: center;
 }
 
-/* https://github.com/go-gitea/gitea/issues/10210 */
+/* if a .top.attached.header is followed by a .segment, add some margin */
+.ui.segments ~ .ui.top.attached.header,
 .ui.attached.segment ~ .ui.top.attached.header {
   margin-top: 1rem;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 22a284d43c..0b4b47f560 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -60,6 +60,8 @@ Gitea's private styles use `g-` prefix.
   text-overflow: ellipsis;
 }
 
+.gt-max-width-24rem { max-width: 24rem !important; }
+
 /* below class names match Tailwind CSS */
 .gt-break-all { word-break: break-all !important; }
 .gt-content-center { align-content: center !important; }
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 8b25775bb4..af2dd2be24 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -2012,35 +2012,10 @@
   margin-top: -3px;
 }
 
-.repository.settings.branches .protected-branches .selection.dropdown {
-  width: 300px;
-}
-
-.repository.settings.branches .protected-branches .item {
-  border: 1px solid var(--color-secondary);
-  padding: 10px 15px;
-}
-
-.repository.settings.branches .protected-branches .item:not(:last-child) {
-  border-bottom: 0;
-}
-
-.repository.settings.branches .branch-protection .help {
-  margin-left: 26px;
-  padding-top: 0;
-}
-
-.repository.settings.branches .branch-protection .fields {
-  margin-left: 20px;
-  display: block;
-}
-
-.repository.settings.branches .branch-protection .whitelist {
-  margin-left: 26px;
-}
-
-.repository.settings.branches .branch-protection .whitelist .dropdown img {
-  display: inline-block;
+/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */
+.repository.settings.branches .branch-protection .ui.checkbox .help,
+.repository.settings.branches .branch-protection .checkbox-sub-item {
+  padding-left: 26px;
 }
 
 .repository.settings.webhook .events .column {
diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js
index 3d02a82bb6..9f094cd2d1 100644
--- a/web_src/js/features/repo-settings.js
+++ b/web_src/js/features/repo-settings.js
@@ -1,6 +1,5 @@
 import $ from 'jquery';
 import {createMonaco} from './codeeditor.js';
-import {initRepoCommonFilterSearchDropdown} from './repo-common.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -73,20 +72,13 @@ export function initRepoSettingGitHook() {
 }
 
 export function initRepoSettingBranches() {
-  // Branches
-  if ($('.repository.settings.branches').length > 0) {
-    initRepoCommonFilterSearchDropdown('.protected-branches .dropdown');
-    $('.enable-protection, .enable-whitelist, .enable-statuscheck').on('change', function () {
-      if (this.checked) {
-        $($(this).data('target')).removeClass('disabled');
-      } else {
-        $($(this).data('target')).addClass('disabled');
-      }
-    });
-    $('.disable-whitelist').on('change', function () {
-      if (this.checked) {
-        $($(this).data('target')).addClass('disabled');
-      }
-    });
-  }
+  if (!$('.repository.settings.branches').length) return;
+  $('.toggle-target-enabled').on('change', function () {
+    const $target = $($(this).attr('data-target'));
+    $target.toggleClass('disabled', !this.checked);
+  });
+  $('.toggle-target-disabled').on('change', function () {
+    const $target = $($(this).attr('data-target'));
+    if (this.checked) $target.addClass('disabled'); // only disable, do not auto enable
+  });
 }