@opendesign-plus-test/components 0.0.1-rc.62 → 0.0.1-rc.64

package/src/components/meeting/OMeetingForm.vue

@@ -514,7 +514,7 @@ defineExpose({
 <template>
   <div class="o-meeting-form">
     <OForm :model="form" ref="formRef" has-required :layout="lePadV ? 'v' : 'h'" class="form-wrapper">
-      <OFormItem :rules="rules.topic" :label="t('meeting.meetingName')" field="topic">
+      <OFormItem :rules="rules.topic" :label="labelMap?.topic ?? t('meeting.meetingName')" field="topic">
         <OInput
           :disabled="isSub"
           size="large"
@@ -524,7 +524,7 @@ defineExpose({
       </OFormItem>
       <OFormItem
         :rules="rules.group_name"
-        :label="groupType === MeetingGroupType.GROUP ? t('meeting.meetingGroup'):t('meeting.meetingSig')"
+        :label="labelMap?.group_name ?? (groupType === MeetingGroupType.GROUP ? t('meeting.meetingGroup') : t('meeting.meetingSig'))"
         field="group_name">
         <OSelect
           :disabled="isEdit"
@@ -539,7 +539,8 @@ defineExpose({
       </OFormItem>
       <OFormItem :rules="rules.etherpad" label="Etherpad" field="etherpad" v-if="form.group_name">
         <template #label>
-          <div class="label-wrapper">
+          <template v-if="labelMap?.etherpad">{{ labelMap.etherpad }}</template>
+          <div v-else class="label-wrapper">
             <span>{{ t('meeting.etherpad') }}&nbsp;</span>
             <OPopover>
               <div class="o-meeting-form-popover-content etherpad">{{ t('meeting.etherpadDesc') }}</div>
@@ -560,9 +561,9 @@ defineExpose({
         />
       </OFormItem>
 
-      <OFormItem :label="t('meeting.meetingTime')" field="time" :rules="rules.time" class="repeat-row" required>
+      <OFormItem :label="labelMap?.time ?? t('meeting.meetingTime')" field="time" :rules="rules.time" class="repeat-row" required>
         <div class="repeat-config-wrapper">
-          <OFormItem field="repeat" class="repeat-item" v-if="!isSub">
+          <OFormItem field="repeat" class="repeat-radio-item" v-if="!isSub">
             <ORadioGroup v-model="form.is_cycle" @change="changeIsCycle" :disabled="isEdit">
               <ORadio :value="false">{{ t('meeting.nonRepeat') }}</ORadio>
               <ORadio :value="true">{{ t('meeting.isRepeat') }}</ORadio>
@@ -589,7 +590,7 @@ defineExpose({
                 </div>
               </OFormItem>
               <OFormItem
-                :label="t('meeting.in')"
+                :label="labelMap?.cycle_point ?? t('meeting.in')"
                 field="cycle_point"
                 class="point-item"
                 v-if="form.cycle_type !== INTERVAL_DAY"
@@ -606,7 +607,7 @@ defineExpose({
                 </OSelect>
                 <OMeetingCalendarSelector v-if="form.cycle_type === INTERVAL_MONTH" v-model="form.cycle_point" />
               </OFormItem>
-              <OFormItem :label="t('meeting.meetingDuration')" field="date_range">
+              <OFormItem :label="labelMap?.date_range ?? t('meeting.meetingDuration')" field="date_range">
                 <ElDatePicker
                   size="large"
                   v-model="form.date_range"
@@ -622,7 +623,7 @@ defineExpose({
               </OFormItem>
             </template>
             <template v-else>
-              <OFormItem :label="t('meeting.meetingDate')" field="date">
+              <OFormItem :label="labelMap?.date ?? t('meeting.meetingDate')" field="date">
                 <ElDatePicker
                   popper-class="o-meeting-form-date-picker-popper"
                   size="large"
@@ -671,14 +672,14 @@ defineExpose({
           </div>
         </div>
       </OFormItem>
-      <OFormItem :label="t('meeting.meetingPlatform')" field="platform" :rules="rules.platform" class="platform-item">
+      <OFormItem :label="labelMap?.platform ?? t('meeting.meetingPlatform')" field="platform" :rules="rules.platform" class="platform-item">
         <ORadioGroup v-model="form.platform" v-if="!data" :disabled="form.is_cycle">
           <ORadio v-for="item in typeOptions" :key="item.value" :value="item.value">{{ getPlatformLabel(item.label) }}
           </ORadio>
         </ORadioGroup>
         <span v-else>{{ getPlatformLabel(form.platform) }}</span>
       </OFormItem>
-      <OFormItem field="agenda" :label="t('meeting.meetingAgenda')" :rules="rules.genda">
+      <OFormItem field="agenda" :label="labelMap?.agenda ?? t('meeting.meetingAgenda')" :rules="rules.genda">
         <OTextarea
           :disabled="isSub"
           size="large"
@@ -686,7 +687,7 @@ defineExpose({
           style="width: 100%"
           :rows="4" v-model="form.agenda" />
       </OFormItem>
-      <OFormItem :label="t('meeting.meetingRecord')" field="is_record" class="record-item full-width-item">
+      <OFormItem :label="labelMap?.is_record ?? t('meeting.meetingRecord')" field="is_record" class="record-item full-width-item">
         <template v-if="lePadV">
           <OSwitch v-model="form.is_record" :disabled="isSub" />
         </template>
@@ -723,7 +724,8 @@ defineExpose({
       </template>
       <OFormItem field="email_list" :rules="rules.email_list">
         <template #label>
-          <div class="label-wrapper">
+          <template v-if="labelMap?.email_list">{{ labelMap.email_list }}</template>
+          <div v-else class="label-wrapper">
             <span>{{ t('meeting.meetingEmail') }}&nbsp;</span>
             <OPopover>
               <div class="o-meeting-form-popover-content">
@@ -773,7 +775,7 @@ defineExpose({
   }
 
   .o-form {
-    --o-input-color: var(--o-color-info2);
+    --o-input-color: var(--o-color-info1);
     --o-placeholder-color: var(--o-color-info4);
 
 
@@ -995,7 +997,8 @@ defineExpose({
   .repeat-config-wrapper {
     width: 100%;
 
-    .repeat-item {
+    .repeat-radio-item {
+      margin-bottom: var(--o-gap-2);
       .o-form-item-label {
         display: none;
       }
@@ -1003,13 +1006,6 @@ defineExpose({
       .o-form-item-main {
         margin-left: 0;
       }
-
-      @include respond('pad_v') {
-        margin-bottom: var(--o-gap-4);
-      }
-      @include respond('phone') {
-        margin-bottom: var(--o-gap-3);
-      }
     }
 
     .repeat-config {

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -58,7 +58,6 @@ const emits = defineEmits(['edit']);
 // -------------------- 自动加载下一页 --------------------
 const nextLoading = ref(false);
 const bottomReached = ref(false);
-const headerRef = ref();
 
 const getList = async () => {
   if (!props.getMeetingListRequest) {
@@ -467,14 +466,11 @@ onMounted(() => {
   window.addEventListener('scroll', handleScroll);
   // 添加resize监听器
   window.addEventListener('resize', handleScroll);
-  getHeaderHeight();
-  window.addEventListener('resize', getHeaderHeight);
 });
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll);
   window.removeEventListener('resize', handleScroll);
-  window.removeEventListener('resize', getHeaderHeight);
   const scrollerContainerEl = scrollerRef.value?.getContainerEl();
   scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
 });
@@ -631,6 +627,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
                     :value="row.sub_id || row.id"
                     :class="{
                       'last-item': idx === groupList.length - 1 && rowIdx === group.list.length - 1,
+                      'is-delete': row.is_delete,
+                      'is-end': row.isExpired,
                     }"
                   >
                     <template #title>
@@ -638,7 +636,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                         <div
                           class="meeting-icon"
                           :style="{
-                            backgroundColor: `${getConfig(CalendarDataType.MEETING, 'color')}`
+                            backgroundColor: `${row.is_delete ? 'var(--o-color-info4)' : getConfig(CalendarDataType.MEETING, 'color')}`
                           }"
                         >
                           <OIcon>
@@ -646,13 +644,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                           </OIcon>
                         </div>
                         <div class="header-info">
-                          <div
-                            :class="{
-                              'meeting-title': true,
-                              'is-delete': row.is_delete,
-                              'is-end': row.isExpired,
-                            }"
-                          >
+                          <div class="meeting-title">
                             <div v-if="row.is_delete">{{ t('meeting.meetingCancelled') }}</div>
                             <div class="title-wrapper">
                               <div class="title-text">{{ row.topic }}</div>
@@ -1005,7 +997,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
               &.is-today {
                 .date-cell-text {
-                  color: #000;
+                  color: var(--o-color-primary1);
+                  font-weight: bold;
                   background-color: var(--o-color-control3-light);
                 }
               }
@@ -1032,9 +1025,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
               }
             }
 
-            .is-today {
-              color: inherit;
-            }
           }
         }
       }
@@ -1075,14 +1065,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
           padding-left: 24px;
           position: relative;
 
-          &.last-item {
-            flex-grow: 1;
-          }
-
           @include respond('phone') {
             padding-left: var(--o-gap-2);
           }
 
+          &.last-item {
+            flex-grow: 1;
+          }
+
           .group-bar {
             position: absolute;
             left: 0;
@@ -1264,6 +1254,19 @@ const cancelActions = computed<DialogActionT[]>(() => {
               border-bottom: none;
             }
           }
+
+          &.is-delete,
+          &.is-end {
+
+            .meeting-title {
+              color: var(--o-color-info4);
+
+              .title-text {
+                color: var(--o-color-info4);
+              }
+            }
+          }
+
           &.o-collapse-item-expanded {
             border-bottom: none;
             background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
@@ -1332,8 +1335,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
                 align-items: center;
                 justify-content: center;
                 flex-shrink: 0;
+                --icon-size2: var(--icon-size);
 
                 .o-icon {
+                  font-size: calc(var(--icon-size2) - 2px);
                   svg path {
                     fill: currentColor;
                   }
@@ -1351,15 +1356,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   margin-bottom: var(--o-gap-2);
                   @include text2;
 
-                  &.is-delete,
-                  &.is-end {
-                    color: var(--o-color-info4);
-
-                    .title-text {
-                      color: var(--o-color-info4) !important;
-                    }
-                  }
-
                   .tag-wrapper {
                     flex: 10;
                     margin-left: var(--o-gap-2);

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
 import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
+import { ElSelect, ElOption } from 'element-plus';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
 import OMeetingSigAside from './components/OMeetingSigAside.vue';
@@ -8,6 +9,7 @@ import { CalendarDataType, MeetingEventsItemT, MeetingItemT } from './types.ts';
 import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
 import OMeetingCalendarList from '@/components/meeting/components/OMeetingCalendarList.vue';
+import { formatDate } from '@/components/meeting/utils.ts';
 
 const props = defineProps<{
   sigName: String;
@@ -21,7 +23,7 @@ const { lePadV } = useScreen();
 const selectDate = ref<string>('');
 
 const loading = ref(false); // 数据加载状态
-const list = ref<(MeetingItemT | MeetingEventsItemT)[]>([]); // 某天的会议列表
+const meetingData = ref<MeetingItemT[]>([]); // 某天的会议列表
 const calendarRows = computed(() => (lePadV.value ? 100 : 5)); // 日历行数
 
 const latestDate = ref<string>('');
@@ -44,7 +46,7 @@ const clickDateCell = async (date: string) => {
     loading.value = true;
     selectDate.value = dayjs(date).format('YYYY-MM-DD');
     const res = await props.getMeetingListRequest(selectDate.value, props.sigName);
-    list.value = res.map((v: MeetingItemT) => {
+    meetingData.value = res.map((v: MeetingItemT) => {
       return {
         ...v,
         time: `${ v.start }-${ v.end }`,
@@ -54,11 +56,6 @@ const clickDateCell = async (date: string) => {
     });
   } finally {
     loading.value = false;
-    eventsData.value.forEach((v) => {
-      if (v.dates?.includes(selectDate.value)) {
-        list.value.push(v);
-      }
-    });
   }
 };
 
@@ -68,7 +65,12 @@ const getDates = async () => {
     meetingDates.value = await props.getDateListRequest();
   }
   if (props.getEventsListRequest) {
-    eventsData.value = await props.getEventsListRequest();
+    eventsData.value = (await props.getEventsListRequest(selectDate.value, props.sigName)).map((v: any) => {
+      return {
+        ...v,
+        type: CalendarDataType.EVENTS,
+      };
+    });
     eventsDates.value = (eventsData.value || []).map(v => v.dates || []).flat();
   }
 };
@@ -94,13 +96,15 @@ const getMonthAndDay = (date: string) => {
 };
 
 const dateList = computed(() => {
-  let list = [];
+  let list: any[];
   if (tabType.value === CalendarDataType.ALL) {
     list = [...(meetingDates.value || []), ...eventsDates.value];
   } else if (tabType.value === CalendarDataType.MEETING) {
     list = meetingDates.value || [];
+  } else if (tabType.value === CalendarDataType.EVENTS) {
+    list = eventsDates.value || [];
   } else {
-    list = eventsDates.value;
+    list = [];
   }
   return [...new Set(list)].sort((a, b) => !dayjs(a).isAfter(dayjs(b)) ? -1 : 1).map(v => dayjs(v).format('YYYY-MM-DD'));
 });
@@ -235,11 +239,25 @@ const changeMonthIdx = (step: number) => {
 onMounted(() => {
   getDates();
 });
+
+const list = computed(() => {
+  let list: any[];
+  if (tabType.value === CalendarDataType.ALL) {
+    list = [...(meetingData.value || []), ...eventsData.value];
+  } else if (tabType.value === CalendarDataType.MEETING) {
+    list = meetingData.value || [];
+  } else if (tabType.value === CalendarDataType.EVENTS) {
+    list = eventsData.value || [];
+  } else {
+    list = [];
+  }
+  return list;
+});
 </script>
 
 <template>
   <div class="o-sig-meeting-calendar">
-    <div class="meeting-card-header" v-if="!lePadV">
+    <div class="meeting-card-header">
       <div class="header-left" v-if="latestDate">
         <span>{{ t('meeting.latestMeeting') }} </span>
         <span>{{ dayjs(latestDate).format('YYYY/MM/DD') }}</span>
@@ -268,12 +286,12 @@ onMounted(() => {
     <template v-if="lePadV && dateList.length">
       <div class="date-select">
         <ElSelect v-model="selectDate" @change="changeSelect">
-          <template #label>{{ t('meeting.latestMeeting') }} {{ selectDate }}</template>
+          <template #label>{{ t('meeting.latestMeeting') }} {{ formatDate(selectDate) }}</template>
           <ElOption
             v-for="date in dateList"
             :key="date"
             :value="date"
-            :label="dayjs(date).format('YYYY/MM/DD')"
+            :label="formatDate(date)"
           />
         </ElSelect>
       </div>
@@ -317,7 +335,7 @@ onMounted(() => {
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {
-      padding: 12px 16px 0;
+      padding: var(--o-gap-3) var(--o-gap-4) 0;
 
       .el-input {
         flex-grow: 1;
@@ -329,7 +347,7 @@ onMounted(() => {
   }
 
   .date-select {
-    padding: 16px;
+    padding: var(--o-gap-4);
 
     .o-select {
       width: 100%;
@@ -340,10 +358,13 @@ onMounted(() => {
     font-weight: 500;
     display: flex;
     align-items: center;
-    padding: 12px 32px 0;
+    padding: var(--o-gap-3) var(--o-gap-6) 0;
     @include text1;
     @include respond('<=pad') {
-      padding: 12px 16px 0;
+      padding: var(--o-gap-3) var(--o-gap-4) 0;
+    }
+    @include respond('<=pad_v') {
+      display: none;
     }
 
     .date-meeting {
@@ -353,8 +374,9 @@ onMounted(() => {
 
     .header-left {
       width: 35%;
-      padding-bottom: 12px;
+      padding-bottom: var(--o-gap-3);
       color: var(--o-color-info1);
+      @include text1;
     }
 
     .o-tab {
@@ -365,7 +387,7 @@ onMounted(() => {
       position: relative;
 
       .o-tab-nav {
-        padding-bottom: 12px;
+        padding-bottom: var(--o-gap-3);
 
         svg path {
           fill: currentColor;
@@ -406,8 +428,9 @@ onMounted(() => {
   }
 
   .list-content {
+    min-width: 0;
     flex-grow: 1;
-    height: 400px;
+    height: 360px;
     @include respond('<=pad_v') {
       height: auto;
     }

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { isClient, OCollapse, OCollapseItem, ODivider, OIcon, OLink, OTag, useMessage } from '@opensig/opendesign';
+import {
+  isClient,
+  OCollapse,
+  OCollapseItem,
+  ODivider,
+  OIcon,
+  OButton,
+  OTag,
+  useMessage,
+} from '@opensig/opendesign';
 import OMeetingDetail from './OMeetingDetail.vue';
 import { computed, nextTick, ref, watch } from 'vue';
 import IconCopy from '~icons/meeting/icon-copy.svg';
@@ -91,9 +100,9 @@ const computedList = computed<any[]>(() => {
         }
       } else {
         if (v.start_date === v.end_date) {
-          dateRange = formatDate(v.start_date, 'YYYY/MM/DD');
+          dateRange = formatDate(v.start_date);
         } else {
-          dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD') }-${ formatDate(v.end_date, 'YYYY/MM/DD') }`;
+          dateRange = `${ formatDate(v.start_date) }-${ formatDate(v.end_date) }`;
         }
       }
 
@@ -198,8 +207,8 @@ const computedList = computed<any[]>(() => {
                 <template v-if="item.activity_type">{{ item.activity_type }}</template>
               </div>
             </div>
-            <OLink
-              :hover-underline="false"
+            <OButton
+              variant="text"
               v-if="item.url"
               :href="item.url"
               target="_blank"
@@ -211,9 +220,9 @@ const computedList = computed<any[]>(() => {
                   <IconChevronRight />
                 </OIcon>
               </template>
-            </OLink>
-            <OLink
-              :hover-underline="false"
+            </OButton>
+            <OButton
+              variant="text"
               v-if="item.join_url"
               :href="item.join_url"
               target="_blank"
@@ -225,9 +234,9 @@ const computedList = computed<any[]>(() => {
                   <IconChevronRight />
                 </OIcon>
               </template>
-            </OLink>
-            <OLink
-              :hover-underline="false"
+            </OButton>
+            <OButton
+              variant="text"
               v-if="item.content_url"
               :href="item.content_url"
               target="_blank"
@@ -239,9 +248,9 @@ const computedList = computed<any[]>(() => {
                   <IconChevronRight />
                 </OIcon>
               </template>
-            </OLink>
-            <OLink
-              :hover-underline="false"
+            </OButton>
+            <OButton
+              variant="text"
               v-if="item.register_url"
               :href="item.register_url"
               target="_blank"
@@ -253,7 +262,7 @@ const computedList = computed<any[]>(() => {
                   <IconChevronRight />
                 </OIcon>
               </template>
-            </OLink>
+            </OButton>
           </div>
           <OIcon @click.stop="() => copyInfo(index)" class="copy-icon">
             <IconCopy />
@@ -374,12 +383,13 @@ const computedList = computed<any[]>(() => {
 
       .o-collapse-item-title {
         flex-grow: 1;
+        min-width: 0;
         margin-bottom: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: var(--o-gap-4);
-        padding-right: var(--o-gap-4);
+        padding-right: var(--o-gap-5);
 
         .meet-title-left {
           flex-grow: 1;
@@ -457,7 +467,7 @@ const computedList = computed<any[]>(() => {
 
     .jump-detail-link {
       padding-left: calc(var(--icon-right) + var(--icon-size2));
-      margin-top: var(--o-gap-2);
+      margin-top: var(--o-gap-1);
       color: var(--o-color-info2);
       font-weight: 400;
       @include tip1;
@@ -508,7 +518,7 @@ const computedList = computed<any[]>(() => {
         margin-right: var(--icon-right);
         width: var(--icon-size2);
         height: var(--icon-size2);
-        font-size: calc(var(--icon-size2) - 4px);
+        font-size: calc(var(--icon-size2) - 2px);
 
         svg path {
           fill: currentColor;
@@ -518,14 +528,16 @@ const computedList = computed<any[]>(() => {
       .text {
         display: block;
         font-weight: 600;
+        min-width: 0;
+        flex: 1;
         @include text-truncate(1);
       }
     }
 
     .meet-info {
+      display: flex;
       margin-left: calc(var(--icon-right) + var(--icon-size2));
       margin-top: var(--o-gap-2);
-      display: flex;
       flex-wrap: wrap;
       align-items: center;
       color: var(--o-color-info3);

package/src/components/meeting/components/OMeetingDetail.vue

@@ -161,11 +161,11 @@ defineExpose({ copyInfo });
     display: flex;
     align-items: flex-start;
     font-size: 14px;
-    gap: var(--o-gap-5);
+    gap: var(--o-gap-2);
 
     @include respond('<=pad_v') {
       font-size: 12px;
-      gap: var(--o-gap-2);
+      gap: var(--o-gap-1);
     }
 
     &:not(.is-empty) {

package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue

@@ -333,7 +333,7 @@ watch(
       <OTabPane :value="0" :label="t('meeting.audioToText')">
         <OScroller v-if="computedCaptions.length" id="captionsScrollDom" class="captions-scroller" show-type="hover"
                    size="small" disabled-x>
-          <ORow gap="0 12px" wrap="wrap">
+          <ORow gap="0 8px" wrap="wrap">
             <OCol flex="0 0 100%" v-for="(item, i) in computedCaptions" :key="i">
               <div class="captions-item" :class="{ 'captions-item-active': currentIndex === i + 1 }"
                    @click="videoPosition(item.start_time)">

package/src/components/meeting/components/OMeetingSigAside.vue

@@ -80,12 +80,14 @@ const changeMonth = (step: number) => {
 .o-sig-meeting-aside {
   width: 35%;
   flex-shrink: 0;
-  padding: var(--o-gap-4) var(--o-gap-6);
+  padding: var(--o-gap-4);
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--o-color-control4);
   @include respond('<=pad') {
     padding: var(--o-gap-4);
+  }
+  @include respond('<=pad_v') {
     border-right: none;
   }
   @include respond('phone') {
@@ -104,7 +106,8 @@ const changeMonth = (step: number) => {
     .month {
       color: var(--o-color-info3);
       margin-bottom: var(--o-gap-2);
-      @include tip1;
+      font-weight: bold;
+      @include text1;
     }
 
     .days {
@@ -124,9 +127,11 @@ const changeMonth = (step: number) => {
         cursor: pointer;
         border: 1px solid transparent;
 
-        &:hover,
-        &.active {
+        &:hover {
           background-color: var(--o-color-control3-light);
+        }
+
+        &.active {
           border-color: var(--o-color-primary1);
         }
 
@@ -144,7 +149,8 @@ const changeMonth = (step: number) => {
           .o-icon {
             width: 20px;
             height: 20px;
-            font-size: 20px;
+            font-size: 18px;
+            padding: 1px;
             line-height: 1em;
             position: relative;
             border-radius: 50%;
@@ -164,7 +170,6 @@ const changeMonth = (step: number) => {
   }
 
   .arrow-wrapper {
-    margin-top: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;