From 739ad0eed2f537bc49f53fb556beab52fd6e66da Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Wed, 25 Sep 2024 16:33:58 +0200
Subject: [PATCH] Keep the status action buttons at their position regardless
of the counter size (#32084)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
---
.../mastodon/components/status_action_bar.jsx | 37 ++++++++++++-------
.../styles/mastodon/components.scss | 13 +++++++
2 files changed, 36 insertions(+), 14 deletions(-)
diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index 165e81c7d8..75531abf56 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -375,20 +375,29 @@ class StatusActionBar extends ImmutablePureComponent {
return (
<div className='status__action-bar'>
- <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
- <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
- <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
- <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
-
- <DropdownMenuContainer
- scrollKey={scrollKey}
- status={status}
- items={menu}
- icon='ellipsis-h'
- iconComponent={MoreHorizIcon}
- direction='right'
- title={intl.formatMessage(messages.more)}
- />
+ <div className='status__action-bar__button-wrapper'>
+ <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
+ </div>
+ <div className='status__action-bar__button-wrapper'>
+ <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+ </div>
+ <div className='status__action-bar__button-wrapper'>
+ <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+ </div>
+ <div className='status__action-bar__button-wrapper'>
+ <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
+ </div>
+ <div className='status__action-bar__button-wrapper'>
+ <DropdownMenuContainer
+ scrollKey={scrollKey}
+ status={status}
+ items={menu}
+ icon='ellipsis-h'
+ iconComponent={MoreHorizIcon}
+ direction='right'
+ title={intl.formatMessage(messages.more)}
+ />
+ </div>
</div>
);
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 25b3003b9f..ea163ff9bf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -299,6 +299,10 @@
}
}
+ &--with-counter {
+ padding-inline-end: 4px;
+ }
+
&__counter {
display: block;
width: auto;
@@ -1465,6 +1469,15 @@ body > [data-popper-placement] {
}
}
+ &__action-bar__button-wrapper {
+ flex-basis: 0;
+ flex-grow: 1;
+
+ &:last-child {
+ flex-grow: 0;
+ }
+ }
+
&--first-in-thread {
border-top: 1px solid var(--background-border-color);
}
--
GitLab