refactor(client): use css modules

packages/frontend/src/components/MkUsersTooltip.vue

@@ -1,11 +1,11 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
-	<div class="beaffaef">
-		<div v-for="u in users" :key="u.id" class="user">
-			<MkAvatar class="avatar" :user="u"/>
-			<MkUserName class="name" :user="u" :nowrap="true"/>
+	<div :class="$style.root">
+		<div v-for="u in users" :key="u.id" :class="$style.user">
+			<MkAvatar :class="$style.avatar" :user="u"/>
+			<MkUserName :class="$style.name" :user="u" :nowrap="true"/>
 		</div>
-		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
+		<div v-if="users.length < count" :class="$style.omitted">+{{ count - users.length }}</div>
 	</div>
 </MkTooltip>
 </template>
@@ -26,26 +26,34 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.beaffaef {
+<style lang="scss" module>
+.root {
 	font-size: 0.9em;
 	text-align: left;
+}
 
-	> .user {
-		line-height: 24px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+.user {
+	line-height: 24px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 
-		&:not(:last-child) {
-			margin-bottom: 3px;
-		}
-
-		> .avatar {
-			width: 24px;
-			height: 24px;
-			margin-right: 3px;
-		}
+	&:not(:last-child) {
+		margin-bottom: 3px;
 	}
 }
+
+.name {
+
+}
+
+.omitted {
+	
+}
+
+.avatar {
+	width: 24px;
+	height: 24px;
+	margin-right: 3px;
+}
 </style>