From dae08c322dbad65cfb0a3062c2a4a7330ef4cd55 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 5 Apr 2024 08:04:34 -0300
Subject: [PATCH] visual adjustments

---
 src/pages/Worker/Card/WorkerCalendar.vue     | 16 +++++++++-------
 src/pages/Worker/Card/WorkerCalendarItem.vue |  8 ++++----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue
index fdfb3f9f8..379ba334f 100644
--- a/src/pages/Worker/Card/WorkerCalendar.vue
+++ b/src/pages/Worker/Card/WorkerCalendar.vue
@@ -138,7 +138,7 @@ watch([year, businessFk], () => refreshData());
         auto-load
     />
     <template v-if="stateStore.isHeaderMounted()">
-        <!-- <Teleport to="#actions-append">
+        <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
                     flat
@@ -152,7 +152,7 @@ watch([year, businessFk], () => refreshData());
                     </QTooltip>
                 </QBtn>
             </div>
-        </Teleport> -->
+        </Teleport>
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
@@ -170,13 +170,13 @@ watch([year, businessFk], () => refreshData());
                 {{ t('Autonomous worker') }}
             </QCardSection>
         </QCard>
-        <QCard v-else class="full-width q-pa-xl">
+        <QCard v-else class="full-width">
             <QIcon
                 v-if="isSubordinate"
                 name="info"
                 size="sm"
                 class="absolute"
-                style="top: 16px; right: 16px"
+                style="top: 14px; right: 14px"
             >
                 <QTooltip max-width="250px">
                     {{
@@ -208,18 +208,20 @@ watch([year, businessFk], () => refreshData());
 .calendar-container {
     display: grid;
     gap: 32px;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 320px));
+    padding: 40px;
+    justify-content: center;
 }
 
 @media (max-width: $breakpoint-md) {
     .calendar-container {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: repeat(2, minmax(0, 320px));
     }
 }
 
 @media (max-width: $breakpoint-xs) {
     .calendar-container {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
+        grid-template-columns: repeat(1, minmax(0, 320px));
     }
 }
 </style>
diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue
index 481d926c4..92fd3f47b 100644
--- a/src/pages/Worker/Card/WorkerCalendarItem.vue
+++ b/src/pages/Worker/Card/WorkerCalendarItem.vue
@@ -150,7 +150,7 @@ watch(props.year, (newValue) => {
 </script>
 
 <template>
-    <QCalendarMonthWrapper style="height: 200px">
+    <QCalendarMonthWrapper style="height: 200px" class="outline">
         <template #header>
             <span class="full-width text-center text-body1 q-py-sm">{{
                 weekdayStore.getLocaleMonths[$props.month - 1].locale
@@ -199,7 +199,7 @@ watch(props.year, (newValue) => {
 
 .q-calendar-month__day--content {
     position: absolute;
-    top: 0;
+    top: 1;
     left: 0;
     display: flex;
     justify-content: center;
@@ -214,8 +214,8 @@ watch(props.year, (newValue) => {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 20px;
-    height: 20px;
+    width: 2em;
+    height: 2em;
     font-size: 0.75em;
     line-height: 1.715em;
     border-radius: 50%;