From 9d69dac77ab0ed86754c6aafecf2d484217f3c77 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:00:25 +0200
Subject: [PATCH] feat: manage to get the popup to render with correct
 positions

---
 components/Guild/MemberEntry.vue  | 18 +++++-------
 components/Modal/ProfilePopup.vue | 47 +++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 1562ee5..4827cb4 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,29 +1,25 @@
 <template>
-    <div class="member-item" @click.prevent="createProfileModal(props.member)" tabindex="0">
+    <div class="member-item" @click.prevent="toggleModalPopup" tabindex="0">
         <Avatar :profile="props.member" class="member-avatar"/>
         <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
     </div>
+    <ModalProfilePopup v-if="modalPopupVisible"
+        :profile="props.member"/>
 </template>
 
 <script lang="ts" setup>
 import { ModalProfilePopup } from '#components';
-import { render } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-function createProfileModal(profile: GuildMemberResponse) {
-	const div = document.createElement("div");
-	const modal = h(ModalProfilePopup, {
-		profile: profile
-	});
-	
-	document.body.appendChild(div);
-	render(modal, div);
-}
+const modalPopupVisible = ref<boolean>(false);
 
+function toggleModalPopup() {
+    modalPopupVisible.value = !modalPopupVisible.value
+}
 </script>
 
 <style>
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index 062412a..1708c2b 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -1,8 +1,10 @@
 <template>
 	<ModalBase :obscure="true">
-		<div id="vertical-container">
-			<span id="cover-background"></span>
-			<Avatar :profile="props.profile" id="pfp"/>
+		<div id="profile-container">
+			<div id="profile-header">
+				<div id="header-mask"></div>
+				<Avatar :profile="props.profile" id="avatar"/>
+			</div>
 		</div>
 	</ModalBase>
 </template>
@@ -18,22 +20,43 @@ const props = defineProps<ModalProps & {
 
 <style scoped>
 
-#vertical-container {
-	display: flex;
-	flex-direction: column;
-
+#profile-container { 
+	position: relative;
 	height: 75dvh;
 	width: 75dvw;
+
+	display: flex;
+	flex-direction: column;
 }
 
-#cover-background {
+#profile-header {
+	flex-shrink: 0;
+	min-height: 9em;
 	width: 100%;
-	min-height: 6em;
-	max-height: 6em;
+}
+
+#header-mask {
+	display: relative;
+	width: 100%;
+	min-height: 7em;
+
+	z-index: 0;
 
 	background-color: var(--primary-color);
-	/* top left and top right */
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0;
+	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
 }
 
+#avatar {
+	display: block;
+	position: absolute;
+	left: 5.5em;
+	top: 3.5em;
+
+	z-index: 1;
+
+	width: 7em;
+	height: 7em;
+
+	border: .375em solid var(--accent-color);
+}
 </style>
\ No newline at end of file