From 4b457dfa0880a01950442deeca40367ad57aeeb6 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 11 Jun 2024 19:07:38 -0400
Subject: [PATCH] =?UTF-8?q?fix(overflow):=20=F0=9F=90=9B=20align=20scroll?=
 =?UTF-8?q?=20buttons=20with=20content=20margin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/skins.citizen.scripts/overflowElements.js    |  6 ++++++
 .../components/OverflowElements.less                   | 10 ++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/resources/skins.citizen.scripts/overflowElements.js b/resources/skins.citizen.scripts/overflowElements.js
index f998fcf9..20f67765 100644
--- a/resources/skins.citizen.scripts/overflowElements.js
+++ b/resources/skins.citizen.scripts/overflowElements.js
@@ -158,8 +158,14 @@ class OverflowElement {
 			this.content = content;
 
 			if ( this.isPointerDevice ) {
+				const elementStyles = window.getComputedStyle( this.element );
+				const topMargin = parseInt( elementStyles.marginTop );
+				const bottomMargin = parseInt( elementStyles.marginBottom );
+
 				const nav = document.createElement( 'div' );
 				nav.className = 'citizen-overflow-nav';
+				nav.style.marginTop = `${ topMargin }px`;
+				nav.style.marginBottom = `${ bottomMargin }px`;
 
 				const leftButton = document.createElement( 'button' );
 				leftButton.className =
diff --git a/resources/skins.citizen.styles/components/OverflowElements.less b/resources/skins.citizen.styles/components/OverflowElements.less
index d2e361a0..242c2602 100644
--- a/resources/skins.citizen.styles/components/OverflowElements.less
+++ b/resources/skins.citizen.styles/components/OverflowElements.less
@@ -55,11 +55,10 @@
 		inset: 0;
 		display: flex;
 		justify-content: space-between;
-		margin-top: var( --space-md );
-		margin-bottom: var( --space-md );
 	}
 
 	&-navButton {
+		width: @overflow-affordnance-size;
 		height: 100%;
 		padding: 0;
 		appearance: none;
@@ -67,8 +66,15 @@
 		background: transparent;
 		border: 0;
 		border-radius: var( --border-radius--small );
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		.hideOverflowButton();
 
+		&::before {
+			width: 1.25rem;
+		}
+
 		&-left {
 			.citizen-overflow--left & {
 				.showOverflowButton();