Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Fix the header scrolling by using min-height instead of height #2152

Closed
wants to merge 1 commit into from
Closed

Fix the header scrolling by using min-height instead of height #2152

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export default {

<style scoped>
.app {
@apply h-screen h-[100dvh];
@apply min-h-screen min-h-[100dvh];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still unsure how the priority of these two is set. They have the same specificity and target the same CSS property.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the device supports dvh, then the last property is used.
If it does not support dvh, then the last property is discarded, and h-screen (100vh) is used.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But what if a device supports dvh but somehow the min-h-screen appears later and the device prioritises that?

}
.sidebar {
/* Header height above md is 80px plus 1px for bottom border */
Expand Down