When having the dropdown of the bottom navbar open and then changing the screen size so that the navbar switches from the bottom to the side, the dropdown stays present (not visible, check the "Temporary Fix" section). This makes for a rare bug that could appear if either a user is on a tablet with just the right size or if a user resizes his browser drastically on a desktop. The bug was already discovered during development in PR #318 but still got merged in as it should not occur for most users and if it does, it will most likely not be noticed. I still think that it would be worthy to fix this if someone finds the time for it.
Steps to reproduce
Switch to the rewrite branch (git checkout rewrite)
Start the app with npm run dev or npm run host
Open the app in your browser and switch to the resizable developer view (usually with Ctrl + Shift + M)
Resize the screen size so that the bottom navbar is visible
Open the dropdown by clicking on the three dots on the very right
Resize the screen size so that the side navbar is visible
You should now not be able to click on anything until you click just anywhere first (which makes the invisible dropdown collapse).
Temporary Fix
The dropdown used to stay visible and float to the top right. As a temporary fix, the dropdown becomes invisible at the lg-Breakpoint. This was a simple "fix" using simple TailwindCSS classes.
Proper Fix
To properly fix this, a bit of JS-Code would be necessary to get the lg-Breakpoint from TailwindCSS and on every resize check if the dropdown should be closed. The shadcn documentation doesn't really say anything on how to programmatically close their dropdowns but from what I've gathered it should probably be done by updating the data-state property. I'm not sure on this though.
What?
When having the dropdown of the bottom navbar open and then changing the screen size so that the navbar switches from the bottom to the side, the dropdown stays present (not visible, check the "Temporary Fix" section). This makes for a rare bug that could appear if either a user is on a tablet with just the right size or if a user resizes his browser drastically on a desktop. The bug was already discovered during development in PR #318 but still got merged in as it should not occur for most users and if it does, it will most likely not be noticed. I still think that it would be worthy to fix this if someone finds the time for it.
Steps to reproduce
rewritebranch (git checkout rewrite)npm run devornpm run hostYou should now not be able to click on anything until you click just anywhere first (which makes the invisible dropdown collapse).
Temporary Fix
The dropdown used to stay visible and float to the top right. As a temporary fix, the dropdown becomes invisible at the lg-Breakpoint. This was a simple "fix" using simple TailwindCSS classes.
Proper Fix
To properly fix this, a bit of JS-Code would be necessary to get the lg-Breakpoint from TailwindCSS and on every resize check if the dropdown should be closed. The shadcn documentation doesn't really say anything on how to programmatically close their dropdowns but from what I've gathered it should probably be done by updating the
data-stateproperty. I'm not sure on this though.The relevant documentation can be found here: