From 694850fdd34a27f7cdeb2ee8b79aefe4e07690d4 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Tue, 18 Feb 2025 14:05:02 -0500
Subject: [PATCH] revamp qpro card box formatting

---
 src/components/UserQpro.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/UserQpro.vue b/src/components/UserQpro.vue
index f3e9684..2794e45 100644
--- a/src/components/UserQpro.vue
+++ b/src/components/UserQpro.vue
@@ -34,17 +34,17 @@ const assetPaths = computed(() => {
 
 <template>
   <div
-    class="w-full drop-shadow-xl"
+    class="qpro-container relative w-full drop-shadow-xl mt-10 md:mt-0"
     :style="{ width: `${props.size}px`, height: `${props.size}px` }"
   >
-    <div class="qpro-character absolute w-full h-full mt-8 md:mt-0">
+    <div class="qpro-character absolute w-full h-full">
       <!-- BG -->
       <img
         v-if="profile?.qpro?.bg"
         class="qpro-bg absolute"
         :src="assetPaths.bg + '_bg.png'"
         alt="bg"
-        style="top: -50px; left: -6px; width: 200px"
+        style="top: -50px; left: -6px; width: 150px"
       />
 
       <!-- Head Back -->
@@ -115,13 +115,13 @@ const assetPaths = computed(() => {
         class="qpro-body-back absolute"
         :src="assetPaths.body + '_b.png'"
         alt="Body Back"
-        style="top: -45px; left: 0px; width: 400px"
+        style="top: -45px; left: 0px; width: auto"
       />
       <img
         class="qpro-body-front absolute"
         :src="assetPaths.body + '_f.png'"
         alt="Body Front"
-        style="top: -45px; left: 0px; width: 400px"
+        style="top: -45px; left: 0px; width: auto"
       />
 
       <!-- Face -->
@@ -172,6 +172,13 @@ const assetPaths = computed(() => {
 </template>
 
 <style scoped>
+.qpro-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .qpro-character img {
   width: auto;
   height: auto;