From 8e84adb176832faa66be3405a48cf4149b74260e Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Fri, 10 Nov 2023 19:01:02 +0500
Subject: [PATCH] [GH-24843]: Fix customize_your_experience overlay position
 (#25053)

* fix: customize_your_experience tour point position

* fix: overlayPunchOut position

* fix: styling

* fix: styling

* fix: semi-colon typo

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../right_controls/right_controls.tsx         | 26 ++++++++++++++++---
 .../customize_your_experience_tour_tip.tsx    |  2 +-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/global_header/right_controls/right_controls.tsx b/webapp/channels/src/components/global_header/right_controls/right_controls.tsx
index 1bd6d625a4..defe1f7a5a 100644
--- a/webapp/channels/src/components/global_header/right_controls/right_controls.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/right_controls.tsx
@@ -40,6 +40,16 @@ const RightControlsContainer = styled.div`
     }
 `;
 
+const StyledCustomizeYourExperienceTour = styled.div`
+    display: flex;
+    align-items: center;
+    height: 100%
+`;
+
+const StyledStatusDropdown = styled.div`
+    margin-left: 8px;
+`;
+
 export type Props = {
     productId?: ProductIdentifier;
 }
@@ -60,8 +70,6 @@ const RightControls = ({productId = null}: Props): JSX.Element => {
                 <>
                     <AtMentionsButton/>
                     <SavedPostsButton/>
-                    <SettingsButton/>
-                    {showCustomizeTip && <CustomizeYourExperienceTour/>}
                 </>
             ) : (
                 <Pluggable
@@ -70,7 +78,19 @@ const RightControls = ({productId = null}: Props): JSX.Element => {
                     pluggableId={productId}
                 />
             )}
-            <StatusDropdown/>
+            <StyledCustomizeYourExperienceTour id='CustomizeYourExperienceTour'>
+                {
+                    isChannels(productId) ? (
+                        <>
+                            <SettingsButton/>
+                            {showCustomizeTip && <CustomizeYourExperienceTour/>}
+                        </>
+                    ) : null
+                }
+                <StyledStatusDropdown>
+                    <StatusDropdown/>
+                </StyledStatusDropdown>
+            </StyledCustomizeYourExperienceTour>
         </RightControlsContainer>
     );
 };
diff --git a/webapp/channels/src/components/tours/onboarding_tour/customize_your_experience_tour_tip.tsx b/webapp/channels/src/components/tours/onboarding_tour/customize_your_experience_tour_tip.tsx
index ddd8de690f..55a7ecdbe8 100644
--- a/webapp/channels/src/components/tours/onboarding_tour/customize_your_experience_tour_tip.tsx
+++ b/webapp/channels/src/components/tours/onboarding_tour/customize_your_experience_tour_tip.tsx
@@ -29,7 +29,7 @@ export const CustomizeYourExperienceTour = () => {
         </p>
     );
 
-    const overlayPunchOut = useMeasurePunchouts(['RightControlsContainer'], [], {y: 6, height: -6, x: 64, width: 0});
+    const overlayPunchOut = useMeasurePunchouts(['CustomizeYourExperienceTour'], []);
 
     return (
         <OnboardingTourTip