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
This commit is contained in:
M Fahru 2024-06-18 09:22:21 -07:00 committed by Copybot
parent 5e560e4376
commit 34781dce81

View file

@ -95,12 +95,13 @@
border: unset; border: unset;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px;
color: var(--neutral-70); color: var(--neutral-70);
margin: 0; margin: 0;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border: 1px solid var(--neutral-20); border: 1px solid var(--neutral-20);
padding: var(--spacing-05) var(--spacing-08);
gap: var(--spacing-04);
&:focus { &:focus {
background-color: unset; background-color: unset;
@ -118,6 +119,13 @@
outline: auto 5px -webkit-focus-ring-color; outline: auto 5px -webkit-focus-ring-color;
background-color: white; 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 { &.active {