Vue.jsのVueカレンダーが幅調整について

前提・実現したいこと

v-calendarの日付画面の幅をローカル環境と本番環境で統一したい。

Vue.js、vuetifyを導入しSPAのカレンダーアプリを開発中です。
ローカル環境とbuild後の本番環境にて日付部分の幅が変わってしまい、何が原因かわからず悩んでいます。

ローカル環境↓

S3にビルドした本番環境↓

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

　
App.vue

Vue.js
1<template>
2  <v-app>
3    <v-main>
4      <Calendar />
5    </v-main>
6  </v-app>
7</template>
8
9<script>
10import Calendar from './components/pages/Calendar';
11
12export default {
13  name: 'App',
14  components: {
15    Calendar,
16  },
17};
18</script>
19

Calendar.vue

Vue.js
1<template>
2  <div>
3    <v-sheet height="6vh" class="d-flex align-center" color="grey lighten-3">
4      <v-btn outlined small class="ma-4" @click="setToday">今日</v-btn>
5      <v-btn icon @click="$refs.calendar.prev()">
6        <v-icon>mdi-chevron-left</v-icon>
7      </v-btn>
8      <v-btn icon @click="$refs.calendar.next()">
9        <v-icon>mdi-chevron-right</v-icon>
10      </v-btn>
11      <v-toolbar-title>{{ title }}</v-toolbar-title>
12    </v-sheet>
13    <v-sheet height="94vh" class="d-flex">
14      <v-sheet width="200px">
15        <CalendarList />
16      </v-sheet>
17      <v-sheet class="flex">
18        <v-calendar
19          ref="calendar"
20          v-model="value"
21          :events="tasks"
22          @change="getTasks"
23          locale="ja-jp"
24          :day-format="(timestamp) => new Date(timestamp.date).getDate()"
25          :month-format="(timestamp) => new Date(timestamp.date).getMonth() + 1 + ' /'"
26          @click:event="showTask"
27          @click:day="initEvent"
28        ></v-calendar>
29      </v-sheet>
30    </v-sheet>
31
32    <v-dialog :value="event !== null" @click:outside="closeDialog" width="600">
33      <TaskDetailDialog v-if="event !== null && !isEditMode" />
34      <TaskFormDialog v-if="event !== null && isEditMode" />
35    </v-dialog>
36  </div>
37</template>
38
39<script>
40import { format } from 'date-fns';
41import { mapGetters, mapActions } from 'vuex';
42import TaskDetailDialog from '../tasks/TaskDetailDialog';
43import TaskFormDialog from '../tasks/TaskFormDialog';
44import CalendarList from '../calendars/CalendarList';
45import { getDefaultStartAndEnd } from '../../functions/datetime';
46
47export default {
48  name: 'Calendar',
49  components: {
50    TaskDetailDialog,
51    TaskFormDialog,
52    CalendarList,
53  },
54  data: () => ({
55    value: format(new Date(), 'yyyy/MM/dd'),
56  }),
57
58  computed: {
59    ...mapGetters('tasks', ['tasks', 'event', 'isEditMode']),
60    title() {
61      return format(new Date(this.value), 'yyyy年 M月');
62    },
63  },
64
65  methods: {
66    ...mapActions('tasks', ['getTasks', 'setTask', 'setEditMode']),
67    setToday() {
68      this.value = format(new Date(), 'yyyy/MM/dd');
69    },
70    showTask({ nativeEvent, event }) {
71      this.setTask(event);
72      nativeEvent.stopPropagation();
73    },
74    closeDialog() {
75      this.setTask(null);
76      this.setEditMode(false);
77    },
78    initEvent({ date }) {
79      const [start, end] = getDefaultStartAndEnd(date);
80
81      this.setTask({ name: '', start, end, timed: true });
82      this.setEditMode(true);
83    },
84  },
85};
86</script>
87