From 115c5fa213338776b3e32789d1b63cb0dc390fe2 Mon Sep 17 00:00:00 2001
From: Steven Engler <smengler3@gmail.com>
Date: Fri, 29 Mar 2024 19:15:13 -0400
Subject: [PATCH] Added padding to header labels

---
 static/css/styles.css | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index e29f33c..e284d20 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -311,25 +311,25 @@ blockquote {
 }
 
 .header-right {
+	/* want the images to have padding to make them easier to click, but we still want them aligned correctly */
+	--label-padding: 0.3em;
+
 	position: absolute;
-	top: 0;
-	right: 0;
+	top: calc(-1 * var(--label-padding));
+	right: calc(-1 * var(--label-padding));
 	display: flex;
 }
 
-.header-right * {
-	margin-left: 1em;
-}
-
-.header-right *:first-child {
-	margin-left: 0;
+.header-right > * {
+	margin-left: 0.4em;
 }
 
 .clickable-header-label {
 	cursor: pointer;
+	padding: var(--label-padding);
 }
 
-.clickable-header-label * {
+.clickable-header-label img {
 	height: 1em;
 	width: auto; /* to override the <img width="__"> attribute when css is supported */
 }
@@ -503,6 +503,7 @@ body {
 	}
 
 	.header-right {
+		top: 0;
 		height: 100%;
 		align-items: center;
 	}