Fix sidebar top being cut off on mobile browsers

[hntk03]

This pull request fixes an issue where the top of the sidebar is cut off on mobile browsers.
Closes #2358

I was able to reproduce this issue on Safari on iPhone.

Why this happens

Using height: 100vh can cause layout issues on mobile browsers because it does not account for the address bar.

As a result, the top of the sidebar can be cut off.

Solution

Use dvh instead of vh, since it accounts for the dynamic viewport height.

[Yann-P]

Thank you

I can confirm your fix works on firefox android

Is there a particular reason for the changes in comments and rgb syntax?

[drammock]

please revert the unrelated changes to comments / color defs. If there's compelling reason to change color defs, please do in a separate PR

[hntk03]

I didn’t intentionally modify the rgb syntax or related parts — those changes were automatically applied by pre-commit.ci (see the commit history).

If I revert those changes, will pre-commit.ci just re-apply them again?
Is there a recommended way to prevent pre-commit.ci from modifying files that are unrelated to this PR?

[Yann-P]

Stylelint clashes with prettier. looking into it

[Yann-P]

@hntk03 I fixed the precommit,
If you drop the ci commit and rebase your branch with main, it should not happen again

[hntk03]

@Yann-P
Thanks for fixing the pre-commit issue.
pre-commit.ci is now passing.
I have reverted the CI commit and rebased my branch.

[Yann-P]

Thanks!