From 8ca664c745e8c12d5e725ace47d0512e6a6a73c2 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 7 Nov 2024 18:48:24 +0100
Subject: [PATCH] web/jsonview: fix extra newlines when copying json

---
 web/src/index.css            | 2 +-
 web/src/ui/util/JSONView.css | 6 +++++-
 web/src/ui/util/JSONView.tsx | 9 ++++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index a07c9ae..982978b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -153,7 +153,7 @@ input, textarea {
 	font-size: 1em;
 }
 
-button, a.button {
+button, a.button, span.button {
 	cursor: var(--clickable-cursor);
 	font-size: 1em;
 	background: none;
diff --git a/web/src/ui/util/JSONView.css b/web/src/ui/util/JSONView.css
index 804482a..bce1a25 100644
--- a/web/src/ui/util/JSONView.css
+++ b/web/src/ui/util/JSONView.css
@@ -15,9 +15,13 @@ pre.json-view {
 		user-select: none;
 	}
 
-	button {
+	span.button {
 		padding: 0 .25rem;
 		display: inline-flex;
+
+		&::before {
+			content: attr(data-symbol);
+		}
 	}
 
 	/* If the screen is wide enough, make line-wrapped strings aligned after the object key */
diff --git a/web/src/ui/util/JSONView.tsx b/web/src/ui/util/JSONView.tsx
index 8bd165a..22e95d9 100644
--- a/web/src/ui/util/JSONView.tsx
+++ b/web/src/ui/util/JSONView.tsx
@@ -82,9 +82,12 @@ function JSONValueWithKey({ data, objectKey, trailingComma, noCollapse }: JSONVi
 		? <span className="json-object-comma p">,</span>
 		: null
 	const collapseButton = noCollapse ? null :
-		<button onClick={toggleCollapsed} title={collapsed ? "Expand" : "Collapse"}>
-			{collapsed ? "+" : "-"}
-		</button>
+		<span
+			className="button"
+			data-symbol={collapsed ? "+" : "-"}
+			onClick={toggleCollapsed}
+			title={collapsed ? "Expand" : "Collapse"}
+		/>
 	if (Array.isArray(data)) {
 		return <>
 			{renderedKey}