Merge branch '33693-protected-branch-dropdowns-cut-off-in-repository-settings-page' into 'master'

Resolve "Protected branch dropdowns cut-off in Repository Settings page"

Closes #33693

See merge request !12247

2 files changed, 25 insertions, 4 deletions

diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index e67f449e1a2..59ff2a86293 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -1,11 +1,28 @@
+function expandSectionParent($section, $content) {
+  $section.addClass('expanded');
+  $content.off('animationend.expandSectionParent');
+}
+
 function expandSection($section) {
   $section.find('.js-settings-toggle').text('Close');
-  $section.find('.settings-content').addClass('expanded').off('scroll').scrollTop(0);
+
+  const $content = $section.find('.settings-content');
+  $content.addClass('expanded').off('scroll.expandSection').scrollTop(0);
+
+  if ($content.hasClass('no-animate')) {
+    expandSectionParent($section, $content);
+  } else {
+    $content.on('animationend.expandSectionParent', () => expandSectionParent($section, $content));
+  }
 }
 
 function closeSection($section) {
   $section.find('.js-settings-toggle').text('Expand');
-  $section.find('.settings-content').removeClass('expanded').on('scroll', () => expandSection($section));
+
+  const $content = $section.find('.settings-content');
+  $content.removeClass('expanded').on('scroll.expandSection', () => expandSection($section));
+
+  $section.removeClass('expanded');
 }
 
 function toggleSection($section) {
@@ -21,7 +38,7 @@ function toggleSection($section) {
 export default function initSettingsPanels() {
   $('.settings').each((i, elm) => {
     const $section = $(elm);
-    $section.on('click', '.js-settings-toggle', () => toggleSection($section));
-    $section.find('.settings-content:not(.expanded)').on('scroll', () => expandSection($section));
+    $section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
+    $section.find('.settings-content:not(.expanded)').on('scroll.expandSection', () => expandSection($section));
   });
 }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 33b3c083fd2..7697a1b1c58 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -29,6 +29,10 @@
   &:first-of-type {
     margin-top: 10px;
   }
+
+  &.expanded {
+    overflow: visible;
+  }
 }
 
 .settings-header {