From 37bbd3c1064380a756b4e821655d7697105f99f5 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Tue, 3 Oct 2023 13:12:39 +0200
Subject: [PATCH] Fix double scroll bars in some columns in advanced interface
(#27187)
---
app/javascript/mastodon/components/column.jsx | 6 --
.../mastodon/features/explore/index.jsx | 72 +++++++++----------
.../mastodon/features/explore/links.jsx | 2 +-
.../mastodon/features/explore/results.jsx | 2 +-
.../mastodon/features/explore/suggestions.jsx | 2 +-
.../mastodon/features/explore/tags.jsx | 2 +-
.../mastodon/features/firehose/index.jsx | 42 ++++++-----
.../styles/mastodon/components.scss | 3 +
8 files changed, 62 insertions(+), 69 deletions(-)
diff --git a/app/javascript/mastodon/components/column.jsx b/app/javascript/mastodon/components/column.jsx
index d737bd347..cf9df3ba2 100644
--- a/app/javascript/mastodon/components/column.jsx
+++ b/app/javascript/mastodon/components/column.jsx
@@ -22,12 +22,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) {
diff --git a/app/javascript/mastodon/features/explore/index.jsx b/app/javascript/mastodon/features/explore/index.jsx
index 1a66adc87..fefdc23fa 100644
--- a/app/javascript/mastodon/features/explore/index.jsx
+++ b/app/javascript/mastodon/features/explore/index.jsx
@@ -67,47 +67,45 @@ class Explore extends PureComponent {
<Search />
</div>
- <div className='scrollable scrollable--flex' data-nosnippet>
- {isSearching ? (
- <SearchResults />
- ) : (
- <>
- <div className='account__section-headline'>
- <NavLink exact to='/explore'>
- <FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' />
+ {isSearching ? (
+ <SearchResults />
+ ) : (
+ <>
+ <div className='account__section-headline'>
+ <NavLink exact to='/explore'>
+ <FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' />
+ </NavLink>
+
+ <NavLink exact to='/explore/tags'>
+ <FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' />
+ </NavLink>
+
+ {signedIn && (
+ <NavLink exact to='/explore/suggestions'>
+ <FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
</NavLink>
+ )}
- <NavLink exact to='/explore/tags'>
- <FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' />
- </NavLink>
+ <NavLink exact to='/explore/links'>
+ <FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' />
+ </NavLink>
+ </div>
- {signedIn && (
- <NavLink exact to='/explore/suggestions'>
- <FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
- </NavLink>
- )}
+ <Switch>
+ <Route path='/explore/tags' component={Tags} />
+ <Route path='/explore/links' component={Links} />
+ <Route path='/explore/suggestions' component={Suggestions} />
+ <Route exact path={['/explore', '/explore/posts', '/search']}>
+ <Statuses multiColumn={multiColumn} />
+ </Route>
+ </Switch>
- <NavLink exact to='/explore/links'>
- <FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' />
- </NavLink>
- </div>
-
- <Switch>
- <Route path='/explore/tags' component={Tags} />
- <Route path='/explore/links' component={Links} />
- <Route path='/explore/suggestions' component={Suggestions} />
- <Route exact path={['/explore', '/explore/posts', '/search']}>
- <Statuses multiColumn={multiColumn} />
- </Route>
- </Switch>
-
- <Helmet>
- <title>{intl.formatMessage(messages.title)}</title>
- <meta name='robots' content={isSearching ? 'noindex' : 'all'} />
- </Helmet>
- </>
- )}
- </div>
+ <Helmet>
+ <title>{intl.formatMessage(messages.title)}</title>
+ <meta name='robots' content={isSearching ? 'noindex' : 'all'} />
+ </Helmet>
+ </>
+ )}
</Column>
);
}
diff --git a/app/javascript/mastodon/features/explore/links.jsx b/app/javascript/mastodon/features/explore/links.jsx
index 663aa6d80..e610c84d4 100644
--- a/app/javascript/mastodon/features/explore/links.jsx
+++ b/app/javascript/mastodon/features/explore/links.jsx
@@ -52,7 +52,7 @@ class Links extends PureComponent {
}
return (
- <div className='explore__links'>
+ <div className='explore__links scrollable' data-nosnippet>
{banner}
{isLoading ? (<LoadingIndicator />) : links.map((link, i) => (
diff --git a/app/javascript/mastodon/features/explore/results.jsx b/app/javascript/mastodon/features/explore/results.jsx
index c6fe9b78e..4c23d6422 100644
--- a/app/javascript/mastodon/features/explore/results.jsx
+++ b/app/javascript/mastodon/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}
diff --git a/app/javascript/mastodon/features/explore/suggestions.jsx b/app/javascript/mastodon/features/explore/suggestions.jsx
index f2907cdb2..c60aa7e11 100644
--- a/app/javascript/mastodon/features/explore/suggestions.jsx
+++ b/app/javascript/mastodon/features/explore/suggestions.jsx
@@ -42,7 +42,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')} />
))}
diff --git a/app/javascript/mastodon/features/explore/tags.jsx b/app/javascript/mastodon/features/explore/tags.jsx
index 1a4d25969..11e014721 100644
--- a/app/javascript/mastodon/features/explore/tags.jsx
+++ b/app/javascript/mastodon/features/explore/tags.jsx
@@ -51,7 +51,7 @@ class Tags extends PureComponent {
}
return (
- <div className='explore__links'>
+ <div className='scrollable explore__links' data-nosnippet>
{banner}
{isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
diff --git a/app/javascript/mastodon/features/firehose/index.jsx b/app/javascript/mastodon/features/firehose/index.jsx
index e5b47d3fe..efde58a5c 100644
--- a/app/javascript/mastodon/features/firehose/index.jsx
+++ b/app/javascript/mastodon/features/firehose/index.jsx
@@ -169,32 +169,30 @@ 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' />
- </NavLink>
+ <div className='account__section-headline'>
+ <NavLink exact to='/public/local'>
+ <FormattedMessage tagName='div' id='firehose.local' defaultMessage='This server' />
+ </NavLink>
- <NavLink exact to='/public/remote'>
- <FormattedMessage tagName='div' id='firehose.remote' defaultMessage='Other servers' />
- </NavLink>
+ <NavLink exact to='/public/remote'>
+ <FormattedMessage tagName='div' id='firehose.remote' defaultMessage='Other servers' />
+ </NavLink>
- <NavLink exact to='/public'>
- <FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' />
- </NavLink>
- </div>
-
- <StatusListContainer
- prepend={prependBanner}
- timelineId={`${feedType}${onlyMedia ? ':media' : ''}`}
- onLoadMore={handleLoadMore}
- trackScroll
- scrollKey='firehose'
- emptyMessage={emptyMessage}
- bindToDocument={!multiColumn}
- />
+ <NavLink exact to='/public'>
+ <FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' />
+ </NavLink>
</div>
+ <StatusListContainer
+ prepend={prependBanner}
+ timelineId={`${feedType}${onlyMedia ? ':media' : ''}`}
+ onLoadMore={handleLoadMore}
+ trackScroll
+ scrollKey='firehose'
+ emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
+ />
+
<Helmet>
<title>{intl.formatMessage(messages.title)}</title>
<meta name='robots' content='noindex' />
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 2e305ed75..f0380de5b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8279,6 +8279,9 @@ noscript {
flex: 1 1 auto;
display: flex;
flex-direction: column;
+ background: $ui-base-color;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
}
.story {