From 78497924ef0817949a5de84eef2b5f0268e0f768 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 25 Jun 2024 09:35:21 -0400
Subject: [PATCH] MM-58802 Fix overlapping back button (#27394)

* fix overlapping back button

* css tweak

* use classNames utility

* fixed import order
---
 .../components/header_footer_route/header.scss    | 15 +++++++++++++--
 .../src/components/header_footer_route/header.tsx |  3 ++-
 webapp/channels/src/components/signup/signup.scss |  1 -
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/header_footer_route/header.scss b/webapp/channels/src/components/header_footer_route/header.scss
index 40e6cc689c..e7c76f9861 100644
--- a/webapp/channels/src/components/header_footer_route/header.scss
+++ b/webapp/channels/src/components/header_footer_route/header.scss
@@ -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) {
diff --git a/webapp/channels/src/components/header_footer_route/header.tsx b/webapp/channels/src/components/header_footer_route/header.tsx
index ced21e652e..8cd1d8a624 100644
--- a/webapp/channels/src/components/header_footer_route/header.tsx
+++ b/webapp/channels/src/components/header_footer_route/header.tsx
@@ -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 &&
diff --git a/webapp/channels/src/components/signup/signup.scss b/webapp/channels/src/components/signup/signup.scss
index 5df5d175c4..5ef5326b59 100644
--- a/webapp/channels/src/components/signup/signup.scss
+++ b/webapp/channels/src/components/signup/signup.scss
@@ -403,7 +403,6 @@
                 padding: 24px;
 
                 .signup-body-message-title {
-                    max-width: 271px;
                     padding-right: 0;
                     font-size: 45px;
                     line-height: 56px;