Fix double scroll bars in some columns in advanced interface (#27187)

This commit is contained in:
Claire 2023-10-03 13:12:39 +02:00
parent 0619ec1592
commit 3e21780cf1
8 changed files with 62 additions and 69 deletions

View file

@ -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) {

View file

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

View file

@ -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) => (

View file

@ -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}

View file

@ -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')} />
))}

View file

@ -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 => (

View file

@ -169,7 +169,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' />
@ -193,7 +192,6 @@ const Firehose = ({ feedType, multiColumn }) => {
emptyMessage={emptyMessage}
bindToDocument={!multiColumn}
/>
</div>
<Helmet>
<title>{intl.formatMessage(messages.title)}</title>

View file

@ -8278,6 +8278,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 {