Fix media marker popup

src/components/spotIcon.vue

@@ -18,7 +18,7 @@ export default {
 		transform: String
 	},
 	computed: {
-		classNames() {
+		iconClassNames() {
 			return [
 				'spot-icon',
 				this.icon,
@@ -49,23 +49,37 @@ export default {
 </script>
 
 <template>
-	<span :title="title" v-if="title || hasText" class="spot-icon-box">
-		<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
-		<span v-if="hasText" :class="textClasses">{{ text }}</span>
+	<span :title="title" :class="hasText?'spot-icon-with-text':null">
+		<span class="spot-icon-symbol">
+			<FontAwesomeIcon
+				:icon="iconDefinition"
+				:class="['spot-icon', this.icon, this.classes, this.margin?'margin-'+this.margin:null]"
+				:fixed-width="resolvedFixedWidth"
+				:width-auto="resolvedAutoWidth"
+				:size="resolvedSize"
+				:transform="resolvedTransform"
+			/>
+		</span>
+		<span v-if="hasText" :class="['spot-icon-text', textClasses]">{{ text }}</span>
 	</span>
-	<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use "@styles/var";
 
-.spot-icon-box {
-	display: flex;
+.spot-icon-with-text {
+	display: inline-flex;
+	align-items: flex-start;
 	gap: var.$elem-spacing;
-	align-items: center;
 
-	span {
+	.spot-icon-symbol {
+		flex: 0 0 auto;
+		align-self: center;
+	}
+
+	.spot-icon-text {
 		flex: 1 1 auto;
+		min-width: 0;
 	}
 }
 
@@ -78,4 +92,4 @@ export default {
 		margin-left: var.$elem-spacing;
 	}
 }
-</style>
+</style>