Fix(Layout Shift Fix) - Resolved Layout Issues on DarkMode Toggle Button and Full-Screen Modal

[nitro56565]

Summary

This PR addresses layout shift issues affecting the DarkToggle Button and Full-Screen Modal, ensuring a smoother and more consistent UI experience.

Changes

• Fixed unintended layout shift on Full screen modal while on start guide tour.
• Adjusted positioning of the Darkmode button to prevent UI flickering and unnecessary clicks.

Screenshots or Video

Before

After

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Vital features and changes captured in unit and/or integration tests
• Commits messages follow AP format
• Extend the documentation, if necessary
• Merging to main from fork:branchname

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	b2330b2
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67b82273c85f3200086e9c54
😎 Deploy Preview	https://deploy-preview-125--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[DianaLease]

I wonder if the tutorial should actually be targeting the "Preview Output" header in that step instead, rather than the full screen toggle button.

[nitro56565]

In the start tour, we generally cover the options, features, and usage of the playground. When David implemented the start tour, the full-screen modal was already a part of it. If I’m not mistaken, if you’re referring to including the entire header instead of just the full screen modal or dark mode toggle button, I can definitely work on clubbing it together.

[nitro56565]

@DianaLease I have updated the layout by combining the preview output with the two feature buttons: Dark Mode and Full-Screen Modal. Additionally, I have added a step in the start tour for the Dark Mode button, as it was missing before.