[Glitch] Fix double scroll bars in some columns in advanced interface

Port 37bbd3c106 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/column.jsx

@@ -24,12 +24,6 @@ export default class Column extends PureComponent {
       scrollable = document.scrollingElement;
     } else {
       scrollable = this.node.querySelector('.scrollable');
-
-      // Some columns have nested `.scrollable` containers, with the outer one
-      // being a wrapper while the actual scrollable content is deeper.
-      if (scrollable.classList.contains('scrollable--flex')) {
-        scrollable = scrollable?.querySelector('.scrollable') || scrollable;
-      }
     }
 
     if (!scrollable) {

app/javascript/flavours/glitch/features/explore/index.jsx

@@ -68,7 +68,6 @@ class Explore extends PureComponent {
           <Search />
         </div>
 
-        <div className='scrollable scrollable--flex' data-nosnippet>
         {isSearching ? (
           <SearchResults />
         ) : (
@@ -108,7 +107,6 @@ class Explore extends PureComponent {
             </Helmet>
           </>
         )}
-        </div>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/explore/links.jsx

@@ -62,7 +62,7 @@ class Links extends PureComponent {
     }
 
     return (
-      <div className='explore__links'>
+      <div className='explore__links scrollable' data-nosnippet>
         {banner}
 
         {isLoading ? (<LoadingIndicator />) : links.map((link, i) => (

app/javascript/flavours/glitch/features/explore/results.jsx

@@ -204,7 +204,7 @@ class Results extends PureComponent {
           <button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
         </div>
 
-        <div className='explore__search-results'>
+        <div className='explore__search-results' data-nosnippet>
           <ScrollableList
             scrollKey='search-results'
             isLoading={isLoading}

app/javascript/flavours/glitch/features/explore/suggestions.jsx

@@ -57,7 +57,7 @@ class Suggestions extends PureComponent {
     }
 
     return (
-      <div className='explore__suggestions'>
+      <div className='explore__suggestions scrollable' data-nosnippet>
         {isLoading ? <LoadingIndicator /> : suggestions.map(suggestion => (
           <AccountCard key={suggestion.get('account')} id={suggestion.get('account')} onDismiss={suggestion.get('source') === 'past_interactions' ? this.handleDismiss : null} />
         ))}

app/javascript/flavours/glitch/features/explore/tags.jsx

@@ -63,7 +63,7 @@ class Tags extends PureComponent {
     }
 
     return (
-      <div className='explore__links'>
+      <div className='scrollable explore__links' data-nosnippet>
         {banner}
 
         {isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (

app/javascript/flavours/glitch/features/firehose/index.jsx

@@ -188,7 +188,6 @@ const Firehose = ({ feedType, multiColumn }) => {
         <ColumnSettings />
       </ColumnHeader>
 
-      <div className='scrollable scrollable--flex'>
       <div className='account__section-headline'>
         <NavLink exact to='/public/local'>
           <FormattedMessage tagName='div' id='firehose.local' defaultMessage='This server' />
@@ -213,7 +212,6 @@ const Firehose = ({ feedType, multiColumn }) => {
         bindToDocument={!multiColumn}
         regex={regex}
       />
-      </div>
 
       <Helmet>
         <title>{intl.formatMessage(messages.title)}</title>

app/javascript/flavours/glitch/styles/components/explore.scss

@@ -37,6 +37,9 @@
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  background: $ui-base-color;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .story {