From b5b0f92a5745f84df508733e6370e35239c7635f Mon Sep 17 00:00:00 2001
From: Ihor Romaniuk <notsuchasall25@gmail.com>
Date: Mon, 27 Nov 2023 09:25:58 +0200
Subject: [PATCH] fix: content centering and z-index position on adaptation
 (#1095)

---
 src/base-component/AuthSmallLayout.jsx | 2 +-
 src/base-component/MediumLayout.jsx    | 2 +-
 src/base-component/SmallLayout.jsx     | 3 +--
 src/sass/_base_component.scss          | 5 +++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/base-component/AuthSmallLayout.jsx b/src/base-component/AuthSmallLayout.jsx
index 35da5622..2b16753f 100644
--- a/src/base-component/AuthSmallLayout.jsx
+++ b/src/base-component/AuthSmallLayout.jsx
@@ -16,7 +16,7 @@ const AuthSmallLayout = ({ username }) => {
       <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
         <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
       </Hyperlink>
-      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+      <div className="d-flex align-items-center m-3.5">
         <div className="small-yellow-line mt-4.5" />
         <div>
           <h1 className="h5 data-hj-suppress">
diff --git a/src/base-component/MediumLayout.jsx b/src/base-component/MediumLayout.jsx
index d63d20c3..7a12d9ac 100644
--- a/src/base-component/MediumLayout.jsx
+++ b/src/base-component/MediumLayout.jsx
@@ -23,7 +23,7 @@ const MediumLayout = () => {
             <div>
               <h1
                 className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2',
+                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
                   { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
                 )}
               >
diff --git a/src/base-component/SmallLayout.jsx b/src/base-component/SmallLayout.jsx
index 12e568a4..5a6137b3 100644
--- a/src/base-component/SmallLayout.jsx
+++ b/src/base-component/SmallLayout.jsx
@@ -17,12 +17,11 @@ const SmallLayout = () => {
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
-        <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+        <div className="d-flex align-items-center m-3.5">
           <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
               'text-white mt-3.5 mb-3.5',
-              { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
             )}
           >
             <span className="mr-1">{formatMessage(messages['start.learning'])}</span>
diff --git a/src/sass/_base_component.scss b/src/sass/_base_component.scss
index fe4b2061..33ed4395 100644
--- a/src/sass/_base_component.scss
+++ b/src/sass/_base_component.scss
@@ -38,6 +38,11 @@
   max-width: 320px;
 }
 
+.main-heading {
+  position: relative;
+  z-index: 2;
+}
+
 .complete-your-profile {
   font-weight: 700;
   line-height: 1;