minor styling

src/components/UserProfileComponents/LargeProfileCard.vue

 <template>
   <div
-    class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+    class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
   >
-    <div v-show="isCurrentUser" class="flex justify-end px-4 pt-4">
+    <div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
       <button
         id="dropdownDefault"
         data-dropdown-toggle="dropdown"
         @click="dropdown = !dropdown"
-        class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
         type="button"
       >
         <svg
@@ -25,7 +25,6 @@
       <div
         id="dropdown"
         v-show="dropdown"
-        zindex="2"
         class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
       >
         <ul class="py-1" aria-labelledby="dropdownDefault">
@@ -67,6 +66,7 @@
         </ul>
       </div>
     </div>
+
     <div class="flex flex-col items-center pb-10">
       <img
         class="mb-3 w-24 h-24 rounded-full shadow-lg"
@@ -95,8 +95,7 @@
 <script>
 import RatingComponent from "@/components/UserProfileComponents/RatingComponent.vue";
 import { parseCurrentUser } from "@/utils/token-utils";
-import { getUser, getRenterRating, getOwnerRating } from "@/utils/apiutil";
-import router from "@/router";
+import { getUser, getAverageRating } from "@/utils/apiutil";
 
 export default {
   name: "LargeProfileCard",
@@ -106,8 +105,8 @@ export default {
       currentUser: {},
       id: -1,
       isCurrentUser: false,
-      renterRating: -1, //getRenterRating(this.userID),
-      ownerRating: -1, //getOwnerRating(this.userID),
+      renterRating: -1,
+      ownerRating: -1,
       dropdown: false,
     };
   },
@@ -116,21 +115,25 @@ export default {
   },
   methods: {
     async getUser() {
-      this.currentUser = parseCurrentUser();
-      this.id = router.currentRoute.value.params.id;
-      if (this.id == this.currentUser.account_id) {
+      this.currentUser = await parseCurrentUser();
+      this.id = await this.$router.currentRoute.value.params.id;
+
+      if (this.id == this.currentUser.accountId) {
         this.isCurrentUser = true;
         this.user = this.currentUser;
         return;
       }
       this.user = await getUser(this.id);
-      this.renterRating = getRenterRating(this.id);
-      this.ownerRating = getOwnerRating(this.id);
+      let rating = await getAverageRating(this.id);
+      if (rating >= 0 && rating <= 5) {
+        this.renterRating = rating;
+        this.ownerRating = rating;
+      }
     },
     getProfilePicture() {
-      /* if (this.user.picture != "") {
+      if (this.user.picture != "") {
         return this.user.picture;
-      } */
+      }
       return "../assets/defaultUserProfileImage.jpg";
     },
   },

src/components/UserProfileComponents/RatingComponent.vue

 <template>
-  <ul v-if="compRating != -1" class="flex justify-center">
+  <ul v-if="rating != -1" class="flex justify-center">
     <li>
       <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         {{ ratingType }}:&nbsp;
@@ -19,7 +19,7 @@
     </li>
     <li>
       <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-        {{ compRating }} out of 5
+        {{ rating }} out of 5
       </p>
     </li>
   </ul>
@@ -40,11 +40,6 @@
 <script>
 export default {
   name: "RatingComponent",
-  data() {
-    return {
-      compRating: this.rating + 0,
-    };
-  },
   props: {
     rating: Number,
     ratingType: String,

src/views/ProfileView.vue

-<!-- View for looking at different profile display methods -->
 <template>
-  <large-profile-card :isCurrentUser="true" />
+  <div class="h-screen bg-gray-200 grid place-items-center">
+    <large-profile-card :isCurrentUser="true" class="align-top" />
+  </div>
 </template>
 
 <script>