From c43cfd24064120b0e75cdcfa352997382fdea6eb Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Mon, 26 Jun 2023 12:31:48 +0200
Subject: [PATCH] [Glitch] Improve dismissable banner buttons when they dont
 fit on 1 line

Port ae30a60b1f6b7f51be38fe541e42a80ee2242d79 to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../home_timeline/components/explore_prompt.jsx     |  8 +++++---
 .../flavours/glitch/styles/components/columns.scss  | 13 +++++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx b/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx
index 972dedd3be..3eb28c59a1 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.jsx
+++ b/app/javascript/flavours/glitch/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>
 );
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 97c8a84d69..a296a31613 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -1005,9 +1005,18 @@ $ui-header-height: 55px;
 
     &__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 {