From edfe0fffc6922d4d4d3235f68631561acec4ffa5 Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Fri, 27 Oct 2023 17:00:37 +0300
Subject: [PATCH] fix: content centering and z-index position on adaptation

---
 .../components/default-layout/MediumLayout.jsx               | 2 +-
 src/base-container/components/default-layout/SmallLayout.jsx | 3 +--
 .../components/welcome-page-layout/SmallLayout.jsx           | 2 +-
 src/sass/_base_component.scss                                | 5 +++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/base-container/components/default-layout/MediumLayout.jsx b/src/base-container/components/default-layout/MediumLayout.jsx
index d63d20c36b..7a12d9ac79 100644
--- a/src/base-container/components/default-layout/MediumLayout.jsx
+++ b/src/base-container/components/default-layout/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-container/components/default-layout/SmallLayout.jsx b/src/base-container/components/default-layout/SmallLayout.jsx
index 12e568a42e..5a6137b365 100644
--- a/src/base-container/components/default-layout/SmallLayout.jsx
+++ b/src/base-container/components/default-layout/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/base-container/components/welcome-page-layout/SmallLayout.jsx b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
index 06d20c7390..066e6021d0 100644
--- a/src/base-container/components/welcome-page-layout/SmallLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
@@ -16,7 +16,7 @@ const SmallLayout = ({ 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/sass/_base_component.scss b/src/sass/_base_component.scss
index fe4b20619b..33ed4395c4 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;