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	ecefd34
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67c068003b0d8e0008a0b9a4
😎 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.

[sanketshevkar]

Toggle button inside the preview block seems a bit off to me.

Scope of the toggle button is for the whole app and not just the preview block and the exapnd button's scope is just on the preview block. I don't feel they should be clubbed together.

[nitro56565]

so do you want to handle the toggle button to be outside the scope and the expand button inside the scope?

[nitro56565]

@DianaLease @sanketshevkar , can you review this layout now? If it looks good, I will write the test case for it.

[DianaLease]

@nitro56565 This looks good, although can you target the "Preview Output" header here instead of the expand button?

[nitro56565]

@DianaLease Do you want me to target just the header, or would the whole preview window be a better choice?

[sanketshevkar]

NIT: The dialog box is merging. Is it possible if we could undo that? Rest looks good.

Also please fix the failing test.

[nitro56565]

NIT: The dialog box is merging. Is it possible if we could undo that? Rest looks good.

Also please fix the failing test.

sure @sanketshevkar I can handle the merging issue but from the above 3 options which one do you prefer for preview output, I believe the whole window would be a good option as referred below as well.

[DianaLease]

sure @sanketshevkar I can handle the merging issue but from the above 3 options which one do you prefer for preview output, I believe the whole window would be a good option as referred below as well.

as discussed on the call today, let's go with the whole preview window, thanks!

[nitro56565]

Hi @sanketshevkar @DianaLease I have fixed the test case as well as the whole preview window for start tour