From be8b518ed5c04e16d4d5dabac0b004a9a14d0824 Mon Sep 17 00:00:00 2001
From: tutaru99 <simas.raudonis@gmail.com>
Date: Thu, 5 Dec 2024 16:38:03 +0100
Subject: [PATCH 1/5] button width

---
 components/base/BaseDatePicker.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/base/BaseDatePicker.vue b/components/base/BaseDatePicker.vue
index b60c30e..e2721c7 100644
--- a/components/base/BaseDatePicker.vue
+++ b/components/base/BaseDatePicker.vue
@@ -113,7 +113,7 @@ onUnmounted(() => {
 .datepicker {
   position: relative;
   width: inherit;
-  min-width: 300px;
+  min-width: 313px;
 
   &__icon {
     margin-right: 8px;
@@ -135,7 +135,7 @@ onUnmounted(() => {
     align-items: center;
     text-align: left;
     width: 100%;
-    min-width: 300px;
+    min-width: 313px;
 
     border: 1px solid #707070;
     border-radius: 32px;

From ea6cc8a83430270ad23b47bf1b94303baa73d80e Mon Sep 17 00:00:00 2001
From: tutaru99 <simas.raudonis@gmail.com>
Date: Thu, 5 Dec 2024 17:10:15 +0100
Subject: [PATCH 2/5] Tweaked callendar, added popper to handle it better
 positioning

---
 components/base/BaseDatePicker.vue | 57 ++++++++++++++++++++++++++++--
 package-lock.json                  | 15 ++++++++
 package.json                       |  1 +
 3 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/components/base/BaseDatePicker.vue b/components/base/BaseDatePicker.vue
index e2721c7..cd32bb2 100644
--- a/components/base/BaseDatePicker.vue
+++ b/components/base/BaseDatePicker.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // @ts-nocheck
 import { v4 as uuidv4 } from 'uuid';
+import { createPopper } from '@popperjs/core';
 
 const id = `datepicker-${uuidv4()}`;
 
@@ -17,6 +18,7 @@ const props = defineProps({
 
 const datepicker = ref();
 const date = ref();
+let popperInstance = null;
 
 const emit = defineEmits(['datepickerValue']);
 
@@ -24,12 +26,61 @@ const handleDateChange = (newDate: object) => {
   emit('datepickerValue', newDate);
   setTimeout(() => {
     showDatepicker.value = false;
+    destroyPopper();
   }, 200);
 };
 
 const showDatepicker = ref(false);
 const toggleDatepicker = () => {
   showDatepicker.value = !showDatepicker.value;
+
+  if (showDatepicker.value) {
+    nextTick(() => {
+      initPopper();
+    });
+  } else {
+    destroyPopper();
+  }
+};
+
+const initPopper = () => {
+  const triggerEl = document.getElementById(id);
+  const datePickerEl = datepicker.value?.$el;
+
+  if (triggerEl && datePickerEl) {
+    popperInstance = createPopper(triggerEl, datePickerEl, {
+      placement: 'bottom',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+        {
+          name: 'preventOverflow',
+          options: {
+            boundary: 'viewport',
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['bottom-start'],
+          },
+        },
+      ],
+    });
+  } else {
+    console.warn('Popper.js: Unable to initialize due to missing elements');
+  }
+};
+
+const destroyPopper = () => {
+  if (popperInstance) {
+    popperInstance.destroy();
+    popperInstance = null;
+  }
 };
 
 const setDate = (dates: object) => {
@@ -53,6 +104,7 @@ const convertToISO = (dateString) => {
 const handleClickOutside = (e) => {
   if (!e.target.closest('.datepicker')) {
     showDatepicker.value = false;
+    destroyPopper();
   }
 };
 
@@ -69,6 +121,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
+  destroyPopper();
 });
 </script>
 
@@ -111,7 +164,6 @@ onUnmounted(() => {
 
 <style lang="postcss" scoped>
 .datepicker {
-  position: relative;
   width: inherit;
   min-width: 313px;
 
@@ -162,9 +214,8 @@ onUnmounted(() => {
   }
 
   &__component {
-    padding-top: 3px;
-    width: 100%;
     z-index: 8;
+    width: auto;
   }
 }
 </style>
diff --git a/package-lock.json b/package-lock.json
index 8295c13..c6378f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.5.1",
+        "@popperjs/core": "^2.11.8",
         "@vee-validate/i18n": "^4.7.3",
         "@vee-validate/rules": "^4.7.3",
         "@vuepic/vue-datepicker": "^9.0.2",
@@ -3542,6 +3543,15 @@
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz",
@@ -23232,6 +23242,11 @@
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@rollup/plugin-alias": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz",
diff --git a/package.json b/package.json
index 82b1a15..c771e78 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
+    "@popperjs/core": "^2.11.8",
     "@vee-validate/i18n": "^4.7.3",
     "@vee-validate/rules": "^4.7.3",
     "@vuepic/vue-datepicker": "^9.0.2",

From 93d2cf8fd5969e2b1f249e5bd9a1977a2ec5bd30 Mon Sep 17 00:00:00 2001
From: tutaru99 <simas.raudonis@gmail.com>
Date: Thu, 5 Dec 2024 18:19:40 +0100
Subject: [PATCH 3/5] Fixed the padding on the last instance of callendar

---
 assets/css/_datepicker.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/css/_datepicker.css b/assets/css/_datepicker.css
index bee5e7e..38e575d 100644
--- a/assets/css/_datepicker.css
+++ b/assets/css/_datepicker.css
@@ -48,6 +48,10 @@
   padding-right: 0 @(--sm) 32px;
 }
 
+.dp__instance_calendar:last-child {
+  padding-right: 0 !important;
+}
+
 .dp__month_year_wrap {
   font-size: 16px;
   font-weight: 700;

From 6727f54c8c1ce0fff6458f125fc32c71f5a91070 Mon Sep 17 00:00:00 2001
From: tutaru99 <simas.raudonis@gmail.com>
Date: Thu, 5 Dec 2024 18:23:06 +0100
Subject: [PATCH 4/5] btn height

---
 components/base/BaseDatePicker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/base/BaseDatePicker.vue b/components/base/BaseDatePicker.vue
index cd32bb2..2ea003c 100644
--- a/components/base/BaseDatePicker.vue
+++ b/components/base/BaseDatePicker.vue
@@ -188,6 +188,7 @@ onUnmounted(() => {
     text-align: left;
     width: 100%;
     min-width: 313px;
+    height: 55px;
 
     border: 1px solid #707070;
     border-radius: 32px;

From 79d26fd0a3e9f00088cd134187c13e120bdeef18 Mon Sep 17 00:00:00 2001
From: tutaru99 <simas.raudonis@gmail.com>
Date: Thu, 5 Dec 2024 18:30:25 +0100
Subject: [PATCH 5/5] Height for date picker

---
 components/base/BaseDatePicker.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/base/BaseDatePicker.vue b/components/base/BaseDatePicker.vue
index 2ea003c..27b8ccd 100644
--- a/components/base/BaseDatePicker.vue
+++ b/components/base/BaseDatePicker.vue
@@ -194,7 +194,6 @@ onUnmounted(() => {
     border-radius: 32px;
     background: none;
     line-height: 18px;
-    height: inherit;
     color: var(--color-gray-62);
     font-weight: 400;
     font-size: var(--font-size-paragraph-sm);