From f09d481eea68d3516dfa28a40fb73a1b0a07ec75 Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Fri, 26 Jan 2024 11:00:00 +0000
Subject: [PATCH] Website redesign - Fixing premium badges and buttons on
 mobile design (#16718)

* fixing premium badge display on every page

* Aligning header sections and fixing buttons

This aligns the header section to the left on mobile layouts
This also fixes the buttons width on mobile layouts

GitOrigin-RevId: 795af064989272969a5707c086b422b4be58ec25
---
 .../stylesheets/app/website-redesign.less     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index 5afd6e6a50..1d2aa1e633 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -710,6 +710,21 @@
     }
   }
 
+  .heading-section-md-align-left {
+    @media (max-width: @screen-md-min) {
+      display: flex;
+      flex-direction: column;
+      align-items: baseline;
+
+      h2 {
+        text-align: left;
+      }
+      p {
+        text-align: left;
+      }
+    }
+  }
+
   .mono-text {
     font-family: 'DM Mono', monospace;
     color: var(--green-60);
@@ -857,14 +872,18 @@
       justify-content: center;
     }
 
-    @media (max-width: @screen-sm-max) {
-      flex-direction: column-reverse;
-      width: 100%;
+    &.align-left-button-sm {
+      @media (max-width: @screen-sm-max) {
+        justify-content: start;
+      }
     }
   }
 
   .label-premium {
     height: 20px; // override default height
+  }
+
+  .label-premium-block-md {
     @media (max-width: @screen-md-max) {
       display: block;
       width: fit-content;