fix: Fix inaccessible content on public pages due to overlapping footer

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 26 insertions, 0 deletions

diff --git a/core/src/public.ts b/core/src/public.ts
new file mode 100644
index 00000000000..ce4af8aa2ac
--- /dev/null
+++ b/core/src/public.ts
@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+const body = document.body
+const footer = document.querySelector('footer')
+let prevHeight = footer?.offsetHeight
+
+const onResize: ResizeObserverCallback = (entries) => {
+	for (const entry of entries) {
+		const height = entry.contentRect.height
+		if (height === prevHeight) {
+			return
+		}
+		prevHeight = height
+		body.style.setProperty('--footer-height', `${height}px`)
+	}
+}
+
+if (footer) {
+	new ResizeObserver(onResize)
+		.observe(footer, {
+			box: 'border-box', // <footer> is border-box
+		})
+}