fix: Mobile pop out menu hidden incorrectly

[KarthikRaju391]

Closes #777

✅ Checklist

• [x] I have followed every step in the contributing guide (updated 2022-10-06).
• [x] The PR title follows the convention we established conventional-commit
• [x] I performed a functional test on my final commit

---

Changelog

Changed the max-width property of the media-query from 767px to 768px

---

Screenshots

💯

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
create-t3-app	✅ Ready (Inspect)	Visit Preview	Nov 22, 2022 at 9:54PM (UTC)

[nexxeln]

Please remove the changeset, we only need it for CLI changes

[github-actions[bot]]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	83
🟢 Accessibility	100
🟢 Best practices	100
🟠 SEO	86
🟠 PWA	54

Lighthouse ran on https://create-t3-app-git-fork-karthikraju391-fix-bug-777-t3-oss.vercel.app/

[KarthikRaju391]

So, I have to remove the changeset and push it again?

[AyanavaKarmakar]

So, I have to remove the changeset and push it again?

Yes, delete the file and push again.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: f849480d64066fef680e4dcde27d3c428ace6b0a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[KarthikRaju391]

Is this ok @AyanavaKarmakar?

[KarthikRaju391]

I'll look into it @juliusmarminge

[c-ehrlich]

The reason for the 767 value is that the breakpoint is at 768, so we want this behaviour until 1 pixel before that.

Was this PR in response to a specific issue in the UI?

[juliusmarminge]

The reason for the 767 value is that the breakpoint is at 768, so we want this behaviour until 1 pixel before that.

Was this PR in response to a specific issue in the UI?

#777 but that issue seems very flaky

[KarthikRaju391]

The issue was that at 767 px the popout wasn't being shown. It was being shown at 766px and 768px but not at 767px

[AyanavaKarmakar]

The reason for the 767 value is that the breakpoint is at 768, so we want this behaviour until 1 pixel before that.

Looks like the menu doesn't pop up only @ 767 x 767 dimensions. What if we set the max-width to 767.5 instead of 767 / 768?

[KarthikRaju391]

It is actually working correctly when max-width is 767.5px.

[KarthikRaju391]

https://user-images.githubusercontent.com/67912316/202848877-37a97b7b-add1-4195-ba38-43837167d2d8.mp4

[c-ehrlich]

Create.T3.App.-.Brave.2022-11-19.17-08-11.mp4

what you are showing here seems like the correct behaviour - the menu exists until 767 px, and doesn't exist at 768+ px because then the "Docs" etc items appear in the navbar instead

[AyanavaKarmakar]

It is actually working correctly when max-width is 767.5px.

Can you please push the changes, so that we can get a live preview?

[juliusmarminge]

I still can't reproduce the original issue though, it works as expected with breakpoint going from 767 to 768 for me on both Safari, Chrome and Firefox.

[nexxeln]

I still can't reproduce the original issue though, it works as expected with breakpoint going from 767 to 768 for me on both Safari, Chrome and Firefox.

I can reproduce the issue on brave on windows

[KarthikRaju391]

I'm out currently, I'll push the changes in an hour.

[juliusmarminge]

Nothing broke on my end either, still good on Safari, Chrome and Firefox for me