From 5fae2de454806730742b7be7435ae1c4fb97cf3c Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 1 Jun 2023 14:47:55 +0200
Subject: [PATCH] Fix overflow behavior of account rows (#25131)
---
app/javascript/mastodon/components/account.jsx | 10 +++++++---
app/javascript/styles/mastodon/components.scss | 17 ++++++++++++++++-
2 files changed, 23 insertions(+), 4 deletions(-)
diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx
index 68a456c1b1..ea863f5d18 100644
--- a/app/javascript/mastodon/components/account.jsx
+++ b/app/javascript/mastodon/components/account.jsx
@@ -143,7 +143,7 @@ class Account extends ImmutablePureComponent {
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
if (firstVerifiedField) {
- verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} /></>;
+ verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
}
return (
@@ -154,9 +154,13 @@ class Account extends ImmutablePureComponent {
<Avatar account={account} size={size} />
</div>
- <div>
+ <div className='account__contents'>
<DisplayName account={account} />
- {!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
+ {!minimal && (
+ <div className='account__details'>
+ <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+ </div>
+ )}
</div>
</Link>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 45e7f7e7b0..6c76ddd4dd 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7814,13 +7814,28 @@ noscript {
}
}
+.account__contents {
+ overflow: hidden;
+}
+
+.account__details {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 1em;
+}
+
.verified-badge {
display: inline-flex;
align-items: center;
color: $valid-value-color;
gap: 4px;
overflow: hidden;
- text-overflow: ellipsis;
+ white-space: nowrap;
+
+ > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
a {
color: inherit;
--
GitLab