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

src/components/base/BaseCategorySelection.vue

@@ -9,17 +9,21 @@
             size="18px",
             style="color: var(--font-dark-blue-color)"
           )
-      .flex.flex-col(:style="{height: '457px'}")
-        .flex.items-center.h-10.gap-x-1(v-for="benefit in benefitData", :key="benefit.id")
+      .field.flex.flex-col.overflow-y-scroll
+        .flex.items-center(
+          v-for="benefit in benefitData",
+          :key="benefit.id",
+          :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}"
+        )
           q-checkbox(
             v-model="selected"
             :val="benefit",
-            :style="{border: 'none', sidth: '36px'}",
+            :style="{border: 'none', width: '36px'}",
             size="32px"
           )
-          .name.flex.h-10.items-center {{benefit.name}}
+          .name.flex.items-center.font-medium.text-xm {{benefit.name}}
       .buttons-group.flex.py-4.px-8.justify-center
-        base-button.text-base.font-semibold(outlined :size="40" @click="closeModalCategories") Отменить
+        base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
         base-button.text-base.font-semibold(:size="40") Сохранить
     .right-side.flex.px-14.font-bold.relative
       q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
@@ -81,6 +85,7 @@ export default {
   },
 };
 </script>
+
 <style lang="sass" scoped>
 .selection-wrapper
   width: 895px
@@ -90,7 +95,16 @@ export default {
   width: 364px
   padding: 32px 28px 0px
 
+.field
+  height: 457px
+  margin-right: -12px
+  &::-webkit-scrollbar
+    width: 4px
+
 .name
+  min-height: 40px
+  padding-top: 4px
+  padding-bottom: 4px
   border-bottom: 1px solid var(--bg-light-grey)
   width: 268px