fix extra scroll bar on mobile

This commit is contained in:
Hazel K 2024-10-04 08:31:25 -04:00
parent bdd8e54be9
commit 4273640530

View file

@ -221,6 +221,9 @@ definePageMetadata(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
//This inspection complains about duplicate "height" properties, but this is needed because "dvh" units are not supported in all browsers.
//The earlier "vh" provide a "close enough" approximation for older browsers.
//noinspection CssOverwrittenProperties
.root { .root {
display: grid; display: grid;
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
@ -231,9 +234,18 @@ definePageMetadata(() => ({
gap: 12px; gap: 12px;
height: 100vh; height: 100vh;
height: 100dvh;
max-width: 1200px; max-width: 1200px;
// The universal layout inserts a "spacer" thing that causes a stray scroll bar.
// We have to create fake "space" for it to "roll up" and back into the viewport, which removes the scrollbar.
margin-bottom: calc(-1 * var(--minBottomSpacing));
// Some "just in case" backup properties.
// These should not be needed, but help to maintain the layout if the above trick ever stops working.
overflow: hidden; overflow: hidden;
position: sticky;
top: 0;
} }
.header { .header {