MM-58802 Fix overlapping back button (#27394)

* fix overlapping back button

* css tweak

* use classNames utility

* fixed import order
This commit is contained in:
Matthew Birtch 2024-06-25 09:35:21 -04:00 committed by GitHub
parent 6773d13dee
commit 78497924ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 4 deletions

View File

@ -24,7 +24,6 @@
@include link;
display: flex;
margin-top: 12px;
color: rgba(var(--center-channel-color-rgb), 0.75);
font-family: 'Metropolis';
font-size: 20px;
@ -63,7 +62,7 @@
.header-back-button {
position: absolute;
top: unset;
bottom: 0;
bottom: -8px;
width: auto;
padding: 0 0 0 40px;
background: none;
@ -72,6 +71,18 @@
@include link;
}
}
&.has-custom-site-name {
.header-logo-link ~ .header-logo-link {
margin-top: 12px;
}
}
&.has-free-banner.has-custom-site-name {
.header-back-button {
bottom: -20px;
}
}
}
@media screen and (max-width: 699px) {

View File

@ -1,6 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import classNames from 'classnames';
import React from 'react';
import {useSelector} from 'react-redux';
import {Link} from 'react-router-dom';
@ -39,7 +40,7 @@ const Header = ({alternateLink, backButtonURL, onBackButtonClick}: HeaderProps)
}
return (
<div className='hfroute-header'>
<div className={classNames('hfroute-header', {'has-free-banner': freeBanner, 'has-custom-site-name': title})}>
<div className='header-main'>
<div>
{freeBanner &&

View File

@ -403,7 +403,6 @@
padding: 24px;
.signup-body-message-title {
max-width: 271px;
padding-right: 0;
font-size: 45px;
line-height: 56px;