From 4273640530d933b2dd4335c3f5d99116661bcee2 Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Fri, 4 Oct 2024 08:31:25 -0400
Subject: [PATCH] fix extra scroll bar on mobile

---
 packages/frontend/src/pages/following-feed.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index 06f2040ca0..6c183769b3 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -221,6 +221,9 @@ definePageMetadata(() => ({
 </script>
 
 <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 {
 	display: grid;
 	grid-template-columns: min-content 1fr min-content;
@@ -231,9 +234,18 @@ definePageMetadata(() => ({
 	gap: 12px;
 
 	height: 100vh;
+	height: 100dvh;
 	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;
+	position: sticky;
+	top: 0;
 }
 
 .header {