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

app/assets/javascripts/settings_panels.js

+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));
   });
 }

app/assets/stylesheets/pages/settings.scss

@@ -29,6 +29,10 @@
   &:first-of-type {
     margin-top: 10px;
   }
+
+  &.expanded {
+    overflow: visible;
+  }
 }
 
 .settings-header {