From 3b577c417642831d74503f5f9f08c377a7698c97 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 4 Nov 2025 19:51:44 -0500
Subject: [PATCH] adjusted the side that popover menus open on in footer

---
 app/(home-pages)/home/Actions/AccountSettings.tsx | 6 ++++--
 app/(home-pages)/home/Actions/CreateNewButton.tsx | 4 ++--
 components/ActionBar/Navigation.tsx               | 4 ++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/AccountSettings.tsx
index 5edfc59a..24a09497 100644
--- a/app/(home-pages)/home/Actions/AccountSettings.tsx
+++ b/app/(home-pages)/home/Actions/AccountSettings.tsx
@@ -10,16 +10,18 @@ import { SpeedyLink } from "components/SpeedyLink";
 import { GoBackSmall } from "components/Icons/GoBackSmall";
 import { useState } from "react";
 import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
+import { useIsMobile } from "src/hooks/isMobile";
 
 export const AccountSettings = (props: { entityID: string }) => {
   let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+  let isMobile = useIsMobile();
 
   return (
     <Popover
       asChild
       onOpenChange={() => setState("menu")}
-      side="right"
-      align="start"
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
       className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
       trigger={<ActionButton icon=<AccountSmall /> label="Settings" />}
     >
diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx
index 33ab9e3d..2052af7c 100644
--- a/app/(home-pages)/home/Actions/CreateNewButton.tsx
+++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx
@@ -51,8 +51,8 @@ export const CreateNewLeafletButton = (props: {}) => {
   return (
     <Menu
       asChild
-      side="right"
-      align="start"
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
       trigger={
         <ActionButton
           id="new-leaflet-button"
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index 5fb19593..e2c903c1 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -23,6 +23,7 @@ import { hydrateNotifications } from "src/notifications";
 import { supabaseServerClient } from "supabase/serverClient";
 import { CommentNotification } from "app/(home-pages)/notifications/CommentNotication";
 import { Separator } from "components/Layout";
+import { useIsMobile } from "src/hooks/isMobile";
 
 export type navPages = "home" | "reader" | "pub" | "discover" | "notifications";
 
@@ -165,6 +166,7 @@ const DiscoverButton = (props: { current?: boolean }) => {
 
 export function NotificationButton(props: { current?: boolean }) {
   let unreads = true;
+  let isMobile = useIsMobile();
   // let identity = await getIdentityData();
   // if (!identity?.atp_did) return;
   // let { data } = await supabaseServerClient
@@ -176,6 +178,8 @@ export function NotificationButton(props: { current?: boolean }) {
   return (
     <Popover
       asChild
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
       trigger={
         <ActionButton
           nav
-- 
2.51.2