Fix several CSS compatibility issues in Safari (#841)

* Fix button margin default for Safari compatibility

* Add Safari vendor prefixes that are somehow still necessary

* Add workaround for Safari not rendering text selection

* Replace <h3> and <p> placeholder labels in floating menus with <TextLabel>

* Replace <span> elements with <TextLabel> and set its cursor for Safari

frontend/src/components/panels/Document.vue

@@ -199,8 +199,8 @@
 					overflow: visible;
 
 					div {
-						background: none;
 						cursor: text;
+						background: none;
 						border: none;
 						margin: 0;
 						padding: 0;

frontend/src/components/panels/LayerTree.vue

@@ -125,10 +125,11 @@
 			}
 
 			.expand-arrow {
+				padding: 0;
+				margin: 0;
 				margin-left: -16px;
 				width: 16px;
 				height: 100%;
-				padding: 0;
 				border: none;
 				position: relative;
 				background: none;
@@ -204,6 +205,7 @@
 						width: 100%;
 
 						&:disabled {
+							-webkit-user-select: none; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
 							user-select: none;
 							// Workaround for `user-select: none` not working on <input> elements
 							pointer-events: none;

frontend/src/components/panels/NodeGraph.vue

@@ -8,7 +8,12 @@
 			@pointerdown="(e: PointerEvent) => pointerDown(e)"
 			@pointermove="(e: PointerEvent) => pointerMove(e)"
 			@pointerup="(e: PointerEvent) => pointerUp(e)"
-			:style="`--grid-spacing: ${gridSpacing}px; --grid-offset-x: ${transform.x * transform.scale}px; --grid-offset-y: ${transform.y * transform.scale}px; --dot-radius: ${dotRadius}px`"
+			:style="{
+				'--grid-spacing': `${gridSpacing}px`,
+				'--grid-offset-x': `${transform.x * transform.scale}px`,
+				'--grid-offset-y': `${transform.y * transform.scale}px`,
+				'--dot-radius': `${dotRadius}px`,
+			}"
 		>
 			<div
 				class="nodes"