Mobile adjustments

components/AppPageLoader.vue

@@ -14,7 +14,7 @@ const isLoaded = computed(() => !isLoading.value)
 <template>
   <div class="relative">
     <div
-      class="relative px-4 py-6 sm:py-20"
+      class="relative px-4 pb-20 pt-6 sm:pt-20"
       :class="{
         'opacity-0': !isLoaded,
         'animate-fade-in opacity-100 transition-opacity delay-200  duration-300':

domains/grid/components/GridFloatingMenu.vue

@@ -43,7 +43,7 @@ const handleAddGrid = () => {
 const handleStyle = computed(() => {
   return {
     bottom: `${bottom.value}px`,
-    transition: 'bottom 0.3s ease-in-out',
+    transition: 'all 0.3s ease-in-out',
   }
 })
 
@@ -103,11 +103,9 @@ const styles = computed(() => {
 })
 
 const handleScroll = () => {
-  if (isMobile.value) {
-    bottom.value = BOTTOM_MARGIN_MOBILE_PX
-    return
-  }
-
+  const bottomMargin = isMobile.value
+    ? BOTTOM_MARGIN_MOBILE_PX
+    : BOTTOM_MARGIN_DESKTOP_PX
   const bottomOffset =
     (document.querySelector('lukso-footer')?.clientHeight || 0) +
     BOTTOM_MARGIN_DESKTOP_PX
@@ -117,13 +115,9 @@ const handleScroll = () => {
 
   if (scrollTop + windowHeight + bottomOffset >= documentHeight) {
     bottom.value =
-      scrollTop +
-      windowHeight +
-      bottomOffset +
-      BOTTOM_MARGIN_DESKTOP_PX -
-      documentHeight
+      scrollTop + windowHeight + bottomOffset + bottomMargin - documentHeight
   } else {
-    bottom.value = BOTTOM_MARGIN_DESKTOP_PX
+    bottom.value = bottomMargin
   }
 }
 
@@ -139,10 +133,11 @@ onUnmounted(() => {
 <template>
   <div
     v-if="isConnected && isViewingOwnProfile"
-    class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)]"
+    class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)]"
     :class="{
-      'h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]': isEditingGrid,
-      'size-[64px]': !isEditingGrid,
+      'right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]':
+        isEditingGrid,
+      'right-4 size-[64px]': !isEditingGrid,
     }"
     :style="handleStyle"
   >