fix: User Detail Card

src/components/UsersDetailCardComponent.vue

@@ -47,19 +47,15 @@ defineEmits<{
 </script>
 
 <template>
-  <div v-if="metadata">
   <div
-      :style="`${noBg ? 'height: 228px' : 'min-height: 310px'}`"
-      class="flip"
+    v-if="metadata"
+    class="full-width"
     :class="{
-        'person-box__no-hover': noHover,
       'status-inactive': list.status === 'INACTIVE',
     }"
   >
-      <AppBox
-        no-padding
-        class="surface-1 front"
-        bordered
+    <div
+      class="surface-1 full-height front bordered rounded"
       :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
       @click="$emit('enterCard')"
     >
@@ -182,21 +178,10 @@ defineEmits<{
               </div>
             </AppCircle>
           </div>
-
-            <!-- <q-avatar size="80px">
-              <img :src="list.imageUrl ?? '/no-profile.png'" />
-            </q-avatar>
-
-            <div class="status-circle">
-              <q-icon
-                :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
-                :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
-              />
-            </div> -->
         </q-card-section>
       </div>
       <div class="box-title">
-          <div class="rounded title">
+        <div class="rounded-type title text-center q-pa-xs">
           {{
             $t(
               list.type === 'CORP'
@@ -206,6 +191,7 @@ defineEmits<{
           }}
         </div>
       </div>
+
       <q-card-section class="no-padding">
         <div class="column items-center justify-center q-mb-md">
           <div class="row">{{ list.name }}</div>
@@ -230,16 +216,11 @@ defineEmits<{
           </q-card-section>
         </div>
       </div>
-      </AppBox>
     </div>
   </div>
 </template>
 
 <style scoped>
-.container {
-  height: 500px;
-}
-
 .flip {
   width: 100%;
   position: relative;
@@ -255,8 +236,6 @@ defineEmits<{
 
 .front {
   width: 100%;
-  height: 310px;
-  position: absolute;
   backface-visibility: hidden;
 }
 
@@ -274,8 +253,7 @@ defineEmits<{
   }
 
   .title {
-    width: 50%;
-    height: 25px;
+    width: 68px;
     background: hsl(var(--_color)) !important;
     position: relative;
     bottom: 16px;
@@ -283,15 +261,16 @@ defineEmits<{
     justify-content: center;
     align-items: center;
     color: white;
+    margin-top: -3px;
   }
 
   .front-scroll {
     background: var(--_bg-front-scroll) !important;
-    height: 150px;
+    /* height: 150px; */
   }
 
   .back-scroll {
-    height: 268px;
+    /* height: 268px; */
 
     .bg-color-text-1 {
       background: var(--_bg-back-detail-1);
@@ -323,8 +302,9 @@ defineEmits<{
   }
 }
 
-.rounded {
-  border-radius: var(--radius-1);
+.rounded-type {
+  border-bottom-left-radius: var(--radius-2);
+  border-bottom-right-radius: var(--radius-2);
 }
 
 .box-title {