[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>

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>
     );
 };

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