[WIP] Добавил форму недавно просмотренных медкарт, фикс стилей

src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   medcard-form-wrapper(v-if="patient", title="Пациент на приеме", title-link="Медкарта")
-    .flex.flex-col
+    .flex.flex-col.h-full
       .header.flex.px-6.py-5.justify-between
         .flex.text-base.font-medium.gap-x-3
           img.h-14.w-14.object-cover.rounded-full(:src="patient?.avatar")
@@ -12,16 +12,15 @@
             .priority.flex(:class="choiceClass(patient.priority)")
             .text-smm(:class="choiceColor(patient.priority)") {{choicePriority(patient.priority)}}
           .grey-color.text-smm Приоритет
-      .flex
-        .data.flex.w-full.h-full(v-for="item in data")
-          .flex.flex-col.px-6.py-4.gap-y-6
-            .text-m.font-bold {{item.title}}
-            .flex.flex-col.text-smm 
-              .grey-color {{item.text1}}
-              .font-medium {{item.first}}
-            .flex.flex-col.text-smm
-              .grey-color {{item.text2}}
-              .font-medium {{item.second}}
+      .flex.h-full
+        .data.flex.w-full.h-full.flex-col.px-6.py-4.gap-y-6.overflow-hidden(v-for="item in data")
+          .text-m.font-bold {{item.title}}
+          .flex.flex-col.text-smm.overflow-hidden.relative.gap-y-1
+            .grey-color {{item.firstLabel}}
+            .insurance.flex.font-medium {{item.firstDescription}}
+          .flex.flex-col.text-smm.gap-y-1
+            .grey-color {{item.secondLabel}}
+            .font-medium {{item.secondDescription}}
 </template>
 
 <script>
@@ -48,9 +47,9 @@ export default {
         { name: "Низский", id: 3, class: "low-priority" },
       ],
       data: [
-        { title: "Запись", text1: "Дата", text2: "Время" },
-        { title: "Данные", text1: "Телефон", text2: "Email" },
-        { title: "Страхование", text1: "Компания", text2: "Полис" },
+        { title: "Запись", firstLabel: "Дата", secondLabel: "Время" },
+        { title: "Данные", firstLabel: "Телефон", secondLabel: "Email" },
+        { title: "Страхование", firstLabel: "Компания", secondLabel: "Полис" },
       ],
     };
   },
@@ -75,15 +74,15 @@ export default {
       deep: true,
       immediate: true,
       handler() {
-        this.data[0].first = moment().format("DD MMMM");
-        this.data[0].second =
+        this.data[0].firstDescription = moment().format("DD MMMM");
+        this.data[0].secondDescription =
           this.patient?.time?.from + "-" + this.patient?.time?.to;
 
-        this.data[1].first = this.patient?.phone;
-        this.data[1].second = this.patient?.email;
+        this.data[1].firstDescription = this.patient?.phone;
+        this.data[1].secondDescription = this.patient?.email;
 
-        this.data[2].first = this.patient?.company;
-        this.data[2].second = this.patient?.policy;
+        this.data[2].firstDescription = this.patient?.company;
+        this.data[2].secondDescription = this.patient?.policy;
       },
     },
   },
@@ -101,8 +100,28 @@ export default {
 
 .data
   border-right: 1px solid var(--gray-scondary)
+  &:first-child
+    max-width: 154px
   &:last-child
+    @media (max-width: 1820px)
+      max-width: 282px
     border-right: none
+    max-width: 214px
+    .insurance
+      width: 209px
+      overflow: hidden
+      &:after
+        content: ""
+        text-align: right
+        position: absolute
+        bottom: 0
+        right: 0
+        width: 72px
+        height: 24px
+        background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
+        pointer-events: none
+      @media (max-width: 1820px)
+        width: 234px
 
 .high-priority
   background: var(--system-color-red)