From ae30a60b1f6b7f51be38fe541e42a80ee2242d79 Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Mon, 26 Jun 2023 12:31:48 +0200
Subject: [PATCH] Improve dismissable banner buttons when they dont fit on 1
line (#25580)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
---
.../home_timeline/components/explore_prompt.jsx | 10 ++++++----
app/javascript/styles/mastodon/components.scss | 13 +++++++++++--
2 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/app/javascript/mastodon/features/home_timeline/components/explore_prompt.jsx b/app/javascript/mastodon/features/home_timeline/components/explore_prompt.jsx
index 172f1a96c..a6993c641 100644
--- a/app/javascript/mastodon/features/home_timeline/components/explore_prompt.jsx
+++ b/app/javascript/mastodon/features/home_timeline/components/explore_prompt.jsx
@@ -15,9 +15,11 @@ export const ExplorePrompt = () => (
<h1><FormattedMessage id='home.explore_prompt.title' defaultMessage='This is your home base within Mastodon.' /></h1>
<p><FormattedMessage id='home.explore_prompt.body' defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. It's looking pretty quiet right now, so how about:" /></p>
- <div className='dismissable-banner__message__actions'>
- <Link to='/explore' className='button'><FormattedMessage id='home.actions.go_to_explore' defaultMessage="See what's trending" /></Link>
- <Link to='/explore/suggestions' className='button button-tertiary'><FormattedMessage id='home.actions.go_to_suggestions' defaultMessage='Find people to follow' /></Link>
+ <div className='dismissable-banner__message__actions__wrapper'>
+ <div className='dismissable-banner__message__actions'>
+ <Link to='/explore' className='button'><FormattedMessage id='home.actions.go_to_explore' defaultMessage="See what's trending" /></Link>
+ <Link to='/explore/suggestions' className='button button-tertiary'><FormattedMessage id='home.actions.go_to_suggestions' defaultMessage='Find people to follow' /></Link>
+ </div>
</div>
</DismissableBanner>
-);
\ No newline at end of file
+);
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 53b68a843..3bf0b10ed 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8768,9 +8768,18 @@ noscript {
&__actions {
display: flex;
- align-items: center;
+ flex-wrap: wrap;
gap: 4px;
- margin-top: 30px;
+
+ &__wrapper {
+ display: flex;
+ margin-top: 30px;
+ }
+
+ .button {
+ display: block;
+ flex-grow: 1;
+ }
}
.button-tertiary {