fix: correct padding on menu for non ios devices

src/components/Discover/index.tsx

@@ -153,7 +153,7 @@ const Discover = () => {
             leave="transition-opacity duration-300"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
-            className="fixed bottom-24 right-8 z-50 flex items-center sm:bottom-8"
+            className="absolute-bottom-shift fixed right-6 z-50 flex items-center sm:bottom-8"
           >
             <button
               onClick={() => setIsEditing(true)}
@@ -171,7 +171,7 @@ const Discover = () => {
             leave="transition duration-300 transform"
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-6"
-            className="fixed bottom-[72px] right-0 left-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-y-0 sm:space-x-3"
+            className="safe-shift-edit-menu fixed right-0 left-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-y-0 sm:space-x-3"
           >
             <Button
               buttonType="default"

src/components/Layout/MobileMenu/index.tsx

@@ -161,39 +161,45 @@ const MobileMenu = () => {
           );
         })}
       </Transition>
-      <div className="padding-bottom-safe flex h-full items-center justify-between border-t border-gray-600 bg-gray-800 bg-opacity-90 px-6 pt-4 text-gray-100 backdrop-blur">
-        {filteredLinks.slice(0, 4).map((link) => {
-          const isActive = router.pathname.match(link.activeRegExp) && !isOpen;
-          return (
-            <Link key={`mobile-menu-link-${link.href}`} href={link.href}>
-              <a
-                className={`flex flex-col items-center space-y-1 ${
-                  isActive ? 'text-indigo-500' : ''
-                }`}
-              >
-                {cloneElement(isActive ? link.svgIconSelected : link.svgIcon, {
-                  className: 'h-6 w-6',
-                })}
-                {/* <span className="text-sm">{link.content}</span> */}
-              </a>
-            </Link>
-          );
-        })}
-        {filteredLinks.length > 4 && (
-          <button
-            className={`flex flex-col items-center space-y-1 ${
-              isOpen ? 'text-indigo-500' : ''
-            }`}
-            onClick={() => toggle()}
-          >
-            {isOpen ? (
-              <XMarkIcon className="h-6 w-6" />
-            ) : (
-              <EllipsisHorizontalIcon className="h-6 w-6" />
-            )}
-            {/* <span className="text-sm">{intl.formatMessage(messages.more)}</span> */}
-          </button>
-        )}
+      <div className="padding-bottom-safe border-t border-gray-600 bg-gray-800 bg-opacity-90 backdrop-blur">
+        <div className="flex h-full items-center justify-between px-6 py-4 text-gray-100">
+          {filteredLinks.slice(0, 4).map((link) => {
+            const isActive =
+              router.pathname.match(link.activeRegExp) && !isOpen;
+            return (
+              <Link key={`mobile-menu-link-${link.href}`} href={link.href}>
+                <a
+                  className={`flex flex-col items-center space-y-1 ${
+                    isActive ? 'text-indigo-500' : ''
+                  }`}
+                >
+                  {cloneElement(
+                    isActive ? link.svgIconSelected : link.svgIcon,
+                    {
+                      className: 'h-6 w-6',
+                    }
+                  )}
+                  {/* <span className="text-sm">{link.content}</span> */}
+                </a>
+              </Link>
+            );
+          })}
+          {filteredLinks.length > 4 && (
+            <button
+              className={`flex flex-col items-center space-y-1 ${
+                isOpen ? 'text-indigo-500' : ''
+              }`}
+              onClick={() => toggle()}
+            >
+              {isOpen ? (
+                <XMarkIcon className="h-6 w-6" />
+              ) : (
+                <EllipsisHorizontalIcon className="h-6 w-6" />
+              )}
+              {/* <span className="text-sm">{intl.formatMessage(messages.more)}</span> */}
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );

src/styles/globals.css

@@ -466,14 +466,16 @@
     top: calc(-4rem - env(safe-area-inset-top));
   }
 
-  .padding-bottom-safe {
-    padding-bottom: calc(env(safe-area-inset-bottom));
+  .absolute-bottom-shift {
+    bottom: calc(5rem + env(safe-area-inset-bottom));
   }
 
-  @media all and (display-mode: browser) {
-    .padding-bottom-safe {
-      @apply pb-4;
-    }
+  .safe-shift-edit-menu {
+    bottom: calc(54px + env(safe-area-inset-bottom));
+  }
+
+  .padding-bottom-safe {
+    padding-bottom: env(safe-area-inset-bottom);
   }
 
   .min-h-screen-shift {