chore: demo misc improvements (#9796)

https://linear.app/unleash/issue/2-2577/transition-screen-between-the-guides
https://linear.app/unleash/issue/2-2582/page-scrolls-in-back

Includes what should be the last batch of demo improvements at this
stage:

- Visually aligns the Back button for consistent layout
- Replaces “Start” with “Start tutorial” for new topics
- Updates topic titles for clarity and consistency
- Applies bold styling to all step titles
- Prevents page scroll when the step target is set to body

frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx

@@ -63,12 +63,18 @@ const StyledTooltipTitle = styled('div')(({ theme }) => ({
 const StyledTooltipActions = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
+    alignItems: 'center',
     marginTop: theme.spacing(3),
     '&&& button': {
         fontSize: theme.fontSizes.smallBody,
     },
 }));
 
+const StyledBackButton = styled(Button)({
+    padding: 0,
+    minWidth: 0,
+});
+
 // @ts-ignore
 export interface IDemoStepTooltipProps extends TooltipRenderProps {
     step: ITutorialTopicStep;
@@ -92,7 +98,7 @@ export const DemoStepTooltip = ({
 }: IDemoStepTooltipProps) => {
     const nextLabel =
         stepIndex === 0
-            ? 'Start'
+            ? 'Start tutorial'
             : stepIndex === topics[topic].steps.length - 1
               ? 'Finish'
               : 'Next';
@@ -112,28 +118,23 @@ export const DemoStepTooltip = ({
                         <CloseIcon />
                     </StyledCloseButton>
                     <StyledTooltipTitle>
-                        <ConditionallyRender
-                            condition={Boolean(step.title)}
-                            show={step.title}
-                            elseShow={
                         <Typography fontWeight='bold'>
-                                    {topics[topic].title}
+                            {step.title || topics[topic].title}
                         </Typography>
-                            }
-                        />
                     </StyledTooltipTitle>
                     {step.content}
                     <StyledTooltipActions>
                         <div>
                             <ConditionallyRender
-                                condition={topic > 0 || stepIndex > 0}
+                                condition={
+                                    !step.hideBackButton && stepIndex > 0
+                                }
                                 show={
-                                    <Button
+                                    <StyledBackButton
-                                        variant='text'
                                         onClick={() => onBack(step)}
                                     >
                                         Back
-                                    </Button>
+                                    </StyledBackButton>
                                 }
                             />
                         </div>
@@ -164,25 +165,19 @@ export const DemoStepTooltip = ({
                 <CloseIcon />
             </StyledCloseButton>
             <StyledTooltipTitle>
-                <ConditionallyRender
-                    condition={Boolean(step.title)}
-                    show={step.title}
-                    elseShow={
                 <Typography fontWeight='bold'>
-                            {topics[topic].title}
+                    {step.title || topics[topic].title}
                 </Typography>
-                    }
-                />
             </StyledTooltipTitle>
             {step.content}
             <StyledTooltipActions>
                 <div>
                     <ConditionallyRender
-                        condition={topic > 0 || stepIndex > 0}
+                        condition={!step.hideBackButton && stepIndex > 0}
                         show={
-                            <Button variant='text' onClick={() => onBack(step)}>
+                            <StyledBackButton onClick={() => onBack(step)}>
                                 Back
-                            </Button>
+                            </StyledBackButton>
                         }
                     />
                 </div>

frontend/src/component/demo/DemoSteps/DemoSteps.tsx

@@ -118,6 +118,8 @@ export const DemoSteps = ({
         }
 
         if (action === ACTIONS.UPDATE) {
+            if (step.target === 'body') return;
+
             const el = document.querySelector(
                 step.target as string,
             ) as HTMLElement | null;

frontend/src/component/demo/demo-topics.tsx

@@ -37,10 +37,10 @@ const ENVIRONMENT = 'dev';
 
 export const TOPICS: ITutorialTopic[] = [
     {
-        title: 'Enable/disable a feature flag',
+        title: 'How to enable/disable a feature flag',
         steps: [
             {
-                title: 'Enable/disable a feature flag',
+                title: 'How to enable/disable a feature flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -91,11 +91,11 @@ export const TOPICS: ITutorialTopic[] = [
         ],
     },
     {
-        title: 'Enable for a specific user',
+        title: 'Next: How to enable for a specific user',
         setup: specificUser,
         steps: [
             {
-                title: 'Enable for a specific user',
+                title: 'Next: How to enable for a specific user',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -335,11 +335,11 @@ export const TOPICS: ITutorialTopic[] = [
         ],
     },
     {
-        title: 'Adjust gradual rollout',
+        title: 'Next: How to adjust gradual rollout',
         setup: gradualRollout,
         steps: [
             {
-                title: 'Adjust gradual rollout',
+                title: 'Next: How to adjust gradual rollout',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -468,11 +468,11 @@ export const TOPICS: ITutorialTopic[] = [
         ],
     },
     {
-        title: 'Adjust variants',
+        title: 'Next: How to adjust variants',
         setup: variants,
         steps: [
             {
-                title: 'Adjust variants',
+                title: 'Next: How to adjust variants',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',