classes and size improvements

src/components/ui/QCalendarMonthWrapper.vue

@@ -50,10 +50,9 @@ const containerClasses = computed(() => {
 }
 
 .transparent-background {
-    .q-calendar-month > * {
-        background-color: var(--vn-section-color) !important;
-        --calendar-outside-background-dark: #transparent;
-    }
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
 }
 
 .nav-container {

src/pages/Worker/Card/WorkerCalendar.vue

@@ -180,7 +180,7 @@ watch([year, businessFk], () => refreshData());
             />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
+    <QPage class="column items-center">
         <QCard v-if="!hasWorkCenter">
             <QCardSection class="text-center">
                 {{ t('Autonomous worker') }}
@@ -218,24 +218,14 @@ watch([year, businessFk], () => refreshData());
 
 <style lang="scss" scoped>
 .calendar-container {
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
     gap: 32px;
-    grid-template-columns: repeat(3, minmax(0, 334px));
     padding: 40px;
     justify-content: center;
 }
-
-@media (max-width: $breakpoint-md) {
-    .calendar-container {
-        grid-template-columns: repeat(2, minmax(0, 334px));
-    }
-}
-
-@media (max-width: $breakpoint-xs) {
-    .calendar-container {
-        grid-template-columns: repeat(1, minmax(0, 334px));
-    }
-}
 </style>
 
 <i18n>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -174,7 +174,7 @@ watch(_year, (newValue) => {
 
 <template>
     <QCalendarMonthWrapper
-        style="height: 290px"
+        style="height: 290px; width: 310px"
         class="outline"
         bordered
         transparent-background