Merge pull request 'fix: fix centring of profile modal auto generated pfps' (#61) from fix-modal-autogenerated-icons into main

Reviewed-on: #61
Reviewed-by: SauceyRed <saucey@saucey.red>

components/DefaultIcon.vue

@@ -1,10 +1,12 @@
 <template>
   <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
 	class="default-icon">
+		<div class="default-icon-text-container">
 			<span class="default-icon-text">
 				{{ previewName }}
 			</span>
 		</div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -31,12 +33,17 @@ if (props.name.length > 3) {
 </script>
 
 <style scoped>
-.default-icon {
+.default-icon, .default-icon-text-container {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
+.default-icon-text-container {
+	height: 100%;
+	width: 100%;
+}
+
 .default-icon-text {
 	/* helps centre the icon, yes, this is NOT perfect */
 	margin-top: -0.15em;