1 files changed, 19 insertions, 16 deletions
diff --git a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx
index 9da6e1757..e476bf6f6 100644
--- a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx
@@ -89,28 +89,31 @@ export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined,
       <div>S</div>
       <div>S</div>
     </div>
-    <div class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
-      {daysInMonth.map(current => (
-        <button type="button"
-          data-month={isSameMonth(current, showingDate)}
-          data-today={isSameDay(current, today)}
-          data-selected={isSameDay(current, selected)}
-          onClick={() => {
-            onChange(AbsoluteTime.fromStampMs(current.getTime()))
-          }}
-          class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 
+    <div class="isolate mt-2">
+      <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
+        {daysInMonth.map(current => (
+          <button type="button"
+            data-month={isSameMonth(current, showingDate)}
+            data-today={isSameDay(current, today)}
+            data-selected={isSameDay(current, selected)}
+            onClick={() => {
+              onChange(AbsoluteTime.fromStampMs(current.getTime()))
+            }}
+            class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 
           data-[month=false]:bg-gray-100 data-[month=true]:bg-white 
             data-[today=true]:font-semibold  
           data-[month=true]:text-gray-900
           data-[today=true]:bg-red-300 data-[today=true]:hover:bg-red-200
           data-[month=true]:hover:bg-gray-200
           data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 ">
-          <time dateTime={format(current, "yyyy-MM-dd")}
-            class="mx-auto flex h-7 w-7 items-center justify-center rounded-full">
-            {format(current, "dd")}
-          </time>
-        </button>
-      ))}
+            <time dateTime={format(current, "yyyy-MM-dd")}
+              class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full">
+              {format(current, "dd")}
+            </time>
+          </button>
+        ))}
+      </div>
+      {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined}
     </div>
   </div>
 }