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/window/title-bar/WindowTitle.vue

@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="window-title">
-		<span>{{ text }}</span>
+		<TextLabel>{{ text }}</TextLabel>
 	</LayoutRow>
 </template>
 
@@ -17,11 +17,15 @@
 import { defineComponent, type PropType } from "vue";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
 		text: { type: String as PropType<string>, required: true },
 	},
-	components: { LayoutRow },
+	components: {
+		LayoutRow,
+		TextLabel,
+	},
 });
 </script>

frontend/src/components/window/workspace/Panel.vue

@@ -12,13 +12,13 @@
 					@click.middle="(e: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))"
 					data-tab
 				>
-					<span>{{ tabLabel.name }}</span>
+					<TextLabel>{{ tabLabel.name }}</TextLabel>
 					<IconButton :action="(e?: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</LayoutRow>
 			</LayoutRow>
 			<PopoverButton :icon="'VerticalEllipsis'">
-				<h3>Panel Options</h3>
-				<p>The contents of this popover menu are coming soon</p>
+				<TextLabel :bold="true">Panel Options</TextLabel>
+				<TextLabel :multiline="true">The contents of this popover menu are coming soon</TextLabel>
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutCol class="panel-body">