fix offset calculation if element position is relative and use inset box shadow for highlighting items plus some css fixes

3 files changed, 24 insertions, 4 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index ea8bf3b14..d8a893b0e 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -194,7 +194,17 @@ a.wall-item-name-link {
 }
 
 .item-highlight {
-	box-shadow: -.15rem 0 0 0 var(--bs-primary);
+	position: relative;
+}
+
+.item-highlight:after {
+	content: '';
+	position: absolute;
+	pointer-events: none;
+	box-shadow: inset .15rem 0 0 0 var(--hz-item-highlight);
+	height: 100%;
+	width: 100%;
+	top: 0;
 }
 
 .item-highlight-fade {
diff --git a/view/js/main.js b/view/js/main.js
index abd6b0384..761a6b504 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -756,7 +756,7 @@ function updateConvItems(mode, data) {
 		if (data_json.includes(bParam_mid) && elem.parentNode.classList.contains('wall-item-sub-thread-wrapper')) {
 			if (!elem.parentNode.parentNode.classList.contains('toplevel_item')) {
 				elem.parentNode.parentNode.classList.add('item-highlight');
-				elem.parentNode.parentNode.style.boxShadow = '-.15rem 0 0 0 ' + stringToHlsColor(JSON.parse(elem.parentNode.parentNode.dataset.b64mids)[0]);
+				document.documentElement.style.setProperty('--hz-item-highlight', stringToHlsColor(JSON.parse(elem.parentNode.parentNode.dataset.b64mids)[0]));
 			}
 		}
 
@@ -982,7 +982,7 @@ function scrollToItem() {
             // Scroll to the target element
             let navHeight = document.querySelector('nav') ? document.querySelector('nav').offsetHeight : 0;
             window.scrollTo({
-                top: thread.offsetTop - navHeight,
+                top: getOffsetTopRelativeToBody(thread) - navHeight,
                 behavior: 'smooth'
             });
 
@@ -993,6 +993,15 @@ function scrollToItem() {
     });
 }
 
+function getOffsetTopRelativeToBody(element) {
+	let offsetTop = 0;
+	while (element) {
+		offsetTop += element.offsetTop;
+		element = element.offsetParent;
+	}
+	return offsetTop;
+}
+
 function collapseHeight() {
 	$(".wall-item-content:not('.divmore_checked'), .directory-collapse:not('.divmore_checked')").each(function(i) {
 		let orgHeight = $(this).outerHeight(true);
@@ -1301,7 +1310,7 @@ function request(id, mid, verb, parent, uuid) {
 		const wrapper = document.getElementById('thread-wrapper-' + id);
 		if (!wrapper.classList.contains('toplevel_item')) {
 			wrapper.classList.add('item-highlight');
-			wrapper.style.boxShadow = '-.15rem 0 0 0 ' + stringToHlsColor(uuid);
+			document.documentElement.style.setProperty('--hz-item-highlight', stringToHlsColor(uuid));
 		}
 
 		fetch('/request?verb=' + verb + '&mid=' + mid + '&parent=' + parent + '&module=' + module)
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 7f56bce25..36023e511 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -953,6 +953,7 @@ a .drop-icons:hover {
 }
 
 .wall-item-pinned i {
+	display: inline-block;
 	transform: rotate(45deg);
 }