From 17d9616c6b3365fd7cdc2f245ad33c7bc8fda307 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 26 Feb 2024 08:10:36 -0700
Subject: [PATCH] Merge pull request #17233 from
 overleaf/mf-fix-button-container-mobile

[website-redesign] Improve button container styling for mobile view

GitOrigin-RevId: 24e3d2a0ecd6bff63fb0b09eb13e68c147a7cbd9
---
 .../web/frontend/stylesheets/app/website-redesign.less   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index 2be9bc1ab6..2fdd4ad1f5 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -1053,6 +1053,15 @@
         justify-content: start;
       }
     }
+
+    @media (max-width: @screen-xs-max) {
+      width: 100%;
+      // this is currently useful for responsive-button-container that has two buttons
+      // in our current implementation, all two-buttons container will have the same value (explore plan + sign up)
+      // we want to sign up to be on the right side on big screen, and on the top on small screen
+      // if we want to apply this style for different buttons scenario, we should change this
+      flex-direction: column-reverse;
+    }
   }
 
   .label-premium {