Components: Glass-modal: Improve responsivity

Signed-off-by: Arturo Manzoli <[email protected]>

src/components/GlassModal.vue

@@ -2,7 +2,7 @@
   <div
     v-if="isVisible"
     class="glass-modal"
-    :class="interfaceStore.isOnPhoneScreen ? 'rounded-[10px]' : 'rounded-[20px]'"
+    :class="[interfaceStore.isOnSmallScreen ? 'rounded-[10px]' : 'rounded-[20px]', selectedOverflow]"
     :style="modalPositionStyle"
   >
     <slot></slot>
@@ -27,10 +27,15 @@ const props = defineProps<{
    *
    */
   position?: ModalPosition
+  /**
+   *
+   */
+  overflow?: 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit' | 'initial' | 'unset'
 }>()
 
 const isVisible = ref(props.isVisible)
 const modalPosition = ref(props.position || 'center')
+const selectedOverflow = ref(props.overflow || 'auto')
 
 const modalPositionStyle = computed(() => {
   switch (modalPosition.value) {
@@ -44,7 +49,7 @@ const modalPositionStyle = computed(() => {
       return {
         top: '50%',
         left: interfaceStore.isOnSmallScreen
-          ? `${interfaceStore.mainMenuWidth - 6}px`
+          ? `${interfaceStore.mainMenuWidth - 20}px`
           : `${interfaceStore.mainMenuWidth + 30}px`,
         transform: 'translateY(-50%)',
       }
@@ -70,8 +75,7 @@ watch(
 .glass-modal {
   position: absolute;
   width: auto;
-  max-height: 85vh;
-  overflow: auto;
+  max-height: 100vh;
   border: 1px solid #cbcbcb33;
   background-color: #4f4f4f33;
   backdrop-filter: blur(15px);