From 824bf93c68dfdb0397f801a679c0cd1c5956f9d4 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Mon, 22 Nov 2021 11:04:46 -0500
Subject: [PATCH] refactor: header padding calculations [breaking]

- Rewrote in vanilla js
- Takes into account the actual vertical height of the header from the top of viewport in addition to the header itself
  - Themes often add stuff above the header, and so theme-related hacks will no longer be necessary
---
 public/persona.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/persona.js b/public/persona.js
index 54d01d3..7e1c2f6 100644
--- a/public/persona.js
+++ b/public/persona.js
@@ -23,11 +23,19 @@ $(document).ready(function () {
 
 	function fixHeaderPadding() {
 		var env = utils.findBootstrapEnvironment();
-		if (env === 'sm' || env === 'xs' || env === 'md') {
-			$('#panel').css('padding-top', $('#header-menu').outerHeight(true));
-		} else {
-			$('#panel').css('padding-top', $('#header-menu').outerHeight(true) - 70);
+		const headerEl = document.getElementById('header-menu');
+		const panelEl = document.getElementById('panel');
+		const headerRect = headerEl.getBoundingClientRect();
+		const headerStyle = window.getComputedStyle(headerEl);
+		let paddingTop = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0);
+
+		// body element itself introduces a hardcoded 70px padding on desktop resolution
+		if (env === 'lg') {
+			paddingTop -= 70;
 		}
+
+		panelEl.style.paddingTop = `${paddingTop}px`;
+
 	}
 
 	var lastBSEnv = '';