From 34781dce819ab3249701578ae2830609161bb1b0 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 18 Jun 2024 09:22:21 -0700
Subject: [PATCH] Merge pull request #18963 from
 overleaf/mf-new-plans-page-very-small-screen-fix-tab

[web] Fix new plans page tabs overflow on mobile view

GitOrigin-RevId: f40efa386b15c921a17c7c046866c7f54aee083e
---
 .../stylesheets/app/plans/plans-new-design.less        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
index 3187e2d6a4..68c3bcce32 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -95,12 +95,13 @@
         border: unset;
         display: flex;
         align-items: center;
-        gap: 12px;
         color: var(--neutral-70);
         margin: 0;
         border-top-right-radius: 8px;
         border-top-left-radius: 8px;
         border: 1px solid var(--neutral-20);
+        padding: var(--spacing-05) var(--spacing-08);
+        gap: var(--spacing-04);
 
         &:focus {
           background-color: unset;
@@ -118,6 +119,13 @@
           outline: auto 5px -webkit-focus-ring-color;
           background-color: white;
         }
+
+        @media (max-width: @screen-xs-max) {
+          font-size: var(--font-size-02);
+          line-height: var(--line-height-02);
+          padding: var(--spacing-05);
+          gap: var(--spacing-02);
+        }
       }
 
       &.active {