Доделала карточки

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .card-wrapper.w-full.flex.gap-y-2px.flex-col
+  .card-wrapper.flex.gap-y-2px.flex-col.absolute
     .header.w-full.flex.gap-x-2px.text-sm
       .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
         span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
@@ -16,19 +16,16 @@
           @click="changeTimeDisplay(true)"
         )
       .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
-        :class="{'pl-6px': expandedTime}"
-      )
-        .flex.items-center(
-          :class="{'collapsed-name': expandedTime}"
-        ) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
-        .gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")
+        :class="{'pl-6px collapsed-name': expandedTime}"
+      ) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
+        .gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")  
       .info-block.justify-center
         img.w-5.h-5(:src="recordingStatus?.icon")
       .last-item.info-block.justify-center(v-if="expandedType")
         img.w-5.h-5(:src="medicalСardStatus?.icon")
-    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.py-10px.color-grey(
+    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.color-grey(
       :style="bodyHeight",
-      :class="{'py-6px': collapsedDisplayCondition}"
+      :class="bodyPadding"
     )
       .flex.gap-x-14(:class="bodyClass")
         .flex.gap-x-2.items-center(
@@ -59,7 +56,7 @@ export default {
   },
   data() {
     return {
-      pixelsPerHalfHour: 33,
+      pixelsPerHalfHour: 38,
       servicesCount: 4,
       trimPatientName: trimName,
       expandedTime: false,
@@ -113,7 +110,7 @@ export default {
       let halfHourCount = parseInt(this.recordDuration / 30, 10) - 1;
       if (halfHourCount)
         return {
-          height: `${36 + 40 * (halfHourCount - 1)}px`,
+          height: `${this.pixelsPerHalfHour * halfHourCount}px`,
         };
       return {
         display: "none",
@@ -140,6 +137,15 @@ export default {
         collapsed: true,
       };
     },
+    bodyPadding() {
+      return this.collapsedDisplayCondition
+        ? {
+            "py-6px": true,
+          }
+        : {
+            "py-10px": true,
+          };
+    },
   },
   methods: {
     changeTimeDisplay(value) {
@@ -155,6 +161,8 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.card-wrapper
+  width: calc(100% - 8px)
 .header
   height: 30px
   & > div
@@ -169,7 +177,6 @@ export default {
 .collapsed
   width: 30px
 .collapsed-name
-  width: 30px
   overflow: hidden
   white-space: nowrap
 .gradient