From 52258dbcb1fa05286d35feb072687f827024afba Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 3 Mar 2026 18:23:13 -0500
Subject: [PATCH] adjusting some issues in popover

---
 app/[leaflet_id]/actions/HelpButton.tsx       |   6 +-
 .../settings/PublicationSettings.tsx          |  15 +-
 app/lish/createPub/UpdatePubForm.tsx          |   3 +-
 components/Icons/PopoverArrow.tsx             |   2 +-
 components/Popover/index.tsx                  |   1 -
 components/ThemeManager/PubThemeSetter.tsx    | 310 +++++++++---------
 components/ThemeManager/ThemeProvider.tsx     |   4 +-
 7 files changed, 177 insertions(+), 164 deletions(-)

diff --git a/app/[leaflet_id]/actions/HelpButton.tsx b/app/[leaflet_id]/actions/HelpButton.tsx
index 12877a6a..aeab5ce5 100644
--- a/app/[leaflet_id]/actions/HelpButton.tsx
+++ b/app/[leaflet_id]/actions/HelpButton.tsx
@@ -19,10 +19,12 @@ export const HelpButton = (props: { noShortcuts?: boolean }) => {
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
       asChild
-      className="max-w-xs w-full"
+      className="max-w-xs w-full p-0!"
       trigger={<ActionButton icon={<HelpSmall />} label="About" />}
     >
-      <div className="flex flex-col text-sm gap-2 text-secondary">
+      <div
+        className={`flex flex-col text-sm gap-2 p-3  text-secondary max-h-[70vh] overflow-y-auto p-2" : ""}`}
+      >
         {/* about links */}
         <HelpLink text="📖 Leaflet Manual" url="https://about.leaflet.pub" />
         <HelpLink text="💡 Make with Leaflet" url="https://make.leaflet.pub" />
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
index 92f72613..73cd71a6 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
@@ -27,7 +27,7 @@ export function PublicationSettingsButton(props: { publication: string }) {
       onOpenChange={() => setState("menu")}
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
-      className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
+      className={`flex flex-col max-w-xs w-[1000px] ${state === "theme" && "bg-white!"} pb-0!`}
       arrowFill={theme.colors["border-light"]}
       trigger={
         <ActionButton
@@ -64,6 +64,7 @@ export function PublicationSettingsButton(props: { publication: string }) {
           setLoading={setLoading}
         />
       )}
+      <div className="spacer h-2 w-full" aria-hidden />
     </Popover>
   );
 }
@@ -93,23 +94,23 @@ const PubSettingsMenu = (props: {
           props.setState("general");
         }}
       >
-        General Settings
+        Publication Settings
         <ArrowRightTiny />
       </button>
       <button
         className={menuItemClassName}
         type="button"
-        onClick={() => props.setState("theme")}
+        onClick={() => props.setState("post-options")}
       >
-        Theme and Layout
+        Post Settings
         <ArrowRightTiny />
       </button>
       <button
         className={menuItemClassName}
         type="button"
-        onClick={() => props.setState("post-options")}
+        onClick={() => props.setState("theme")}
       >
-        Post Options
+        Theme and Layout
         <ArrowRightTiny />
       </button>
     </div>
@@ -124,7 +125,7 @@ export const PubSettingsHeader = (props: {
   children: React.ReactNode;
 }) => {
   return (
-    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
+    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1 flex-shrink-0">
       {props.children}
       {props.state !== "menu" && (
         <div className="flex gap-2">
diff --git a/app/lish/createPub/UpdatePubForm.tsx b/app/lish/createPub/UpdatePubForm.tsx
index f9844796..c7301c5c 100644
--- a/app/lish/createPub/UpdatePubForm.tsx
+++ b/app/lish/createPub/UpdatePubForm.tsx
@@ -74,6 +74,7 @@ export const EditPubForm = (props: {
 
   return (
     <form
+      className="min-h-0 flex-1 flex flex-col pb-2"
       onSubmit={async (e) => {
         if (!pubData) return;
         e.preventDefault();
@@ -104,7 +105,7 @@ export const EditPubForm = (props: {
       >
         General Settings
       </PubSettingsHeader>
-      <div className="flex flex-col gap-3 w-[1000px] max-w-full pb-2">
+      <div className="flex flex-col gap-3 w-[1000px] max-w-full pb-2 overflow-y-auto min-h-0">
         <div className="flex items-center justify-between gap-2 mt-2 ">
           <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
             Logo <span className="font-normal">(optional)</span>
diff --git a/components/Icons/PopoverArrow.tsx b/components/Icons/PopoverArrow.tsx
index 25b77aca..82bfee19 100644
--- a/components/Icons/PopoverArrow.tsx
+++ b/components/Icons/PopoverArrow.tsx
@@ -11,7 +11,7 @@ export const PopoverArrow = (
       height="8"
       viewBox="0 0 16 8"
       fill="none"
-      className="-mt-px"
+      className=""
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
diff --git a/components/Popover/index.tsx b/components/Popover/index.tsx
index 98b44eef..5e9fa3f0 100644
--- a/components/Popover/index.tsx
+++ b/components/Popover/index.tsx
@@ -47,7 +47,6 @@ export const Popover = (props: {
               max-w-(--radix-popover-content-available-width)
               max-h-(--radix-popover-content-available-height)
               border border-border rounded-md shadow-md
-              overflow-y-scroll
               ${props.className}
             `}
               side={props.side}
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index e49ffbe1..b874904d 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -65,174 +65,182 @@ export const PubThemeSetter = (props: {
   let toaster = useToaster();
 
   return (
-    <BaseThemeProvider local {...localPubTheme} hasBackgroundImage={!!image}>
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault();
-          if (!pub) return;
-          props.setLoading(true);
-          let result = await updatePublicationTheme({
-            uri: pub.uri,
-            theme: {
-              pageBackground: ColorToRGBA(localPubTheme.bgPage),
-              showPageBackground: showPageBackground,
-              backgroundColor: image
-                ? ColorToRGBA(localPubTheme.bgLeaflet)
-                : ColorToRGB(localPubTheme.bgLeaflet),
-              backgroundRepeat: image?.repeat,
-              backgroundImage: image ? image.file : null,
-              pageWidth: pageWidth,
-              primary: ColorToRGB(localPubTheme.primary),
-              accentBackground: ColorToRGB(localPubTheme.accent1),
-              accentText: ColorToRGB(localPubTheme.accent2),
-            },
-          });
+    <BaseThemeProvider
+      local
+      {...localPubTheme}
+      hasBackgroundImage={!!image}
+      className="min-h-0!"
+    >
+      <div className="min-h-0 flex-1 flex flex-col pb-0.5">
+        <form
+          className="flex-shrink-0"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            if (!pub) return;
+            props.setLoading(true);
+            let result = await updatePublicationTheme({
+              uri: pub.uri,
+              theme: {
+                pageBackground: ColorToRGBA(localPubTheme.bgPage),
+                showPageBackground: showPageBackground,
+                backgroundColor: image
+                  ? ColorToRGBA(localPubTheme.bgLeaflet)
+                  : ColorToRGB(localPubTheme.bgLeaflet),
+                backgroundRepeat: image?.repeat,
+                backgroundImage: image ? image.file : null,
+                pageWidth: pageWidth,
+                primary: ColorToRGB(localPubTheme.primary),
+                accentBackground: ColorToRGB(localPubTheme.accent1),
+                accentText: ColorToRGB(localPubTheme.accent2),
+              },
+            });
 
-          if (!result.success) {
-            props.setLoading(false);
-            if (result.error && isOAuthSessionError(result.error)) {
-              toaster({
-                content: <OAuthErrorMessage error={result.error} />,
-                type: "error",
-              });
-            } else {
-              toaster({
-                content: "Failed to update theme",
-                type: "error",
-              });
+            if (!result.success) {
+              props.setLoading(false);
+              if (result.error && isOAuthSessionError(result.error)) {
+                toaster({
+                  content: <OAuthErrorMessage error={result.error} />,
+                  type: "error",
+                });
+              } else {
+                toaster({
+                  content: "Failed to update theme",
+                  type: "error",
+                });
+              }
+              return;
             }
-            return;
-          }
 
-          mutate((pub) => {
-            if (result.publication && pub?.publication)
-              return {
-                ...pub,
-                publication: { ...pub.publication, ...result.publication },
-              };
-            return pub;
-          }, false);
-          props.setLoading(false);
-        }}
-      >
-        <PubSettingsHeader
-          loading={props.loading}
-          setLoadingAction={props.setLoading}
-          backToMenuAction={props.backToMenu}
-          state={"theme"}
+            mutate((pub) => {
+              if (result.publication && pub?.publication)
+                return {
+                  ...pub,
+                  publication: { ...pub.publication, ...result.publication },
+                };
+              return pub;
+            }, false);
+            props.setLoading(false);
+          }}
         >
-          Theme and Layout
-        </PubSettingsHeader>
-      </form>
+          <PubSettingsHeader
+            loading={props.loading}
+            setLoadingAction={props.setLoading}
+            backToMenuAction={props.backToMenu}
+            state={"theme"}
+          >
+            Theme and Layout
+          </PubSettingsHeader>
+        </form>
+
+        <div className="themeSetterContent flex flex-col w-full overflow-y-scroll min-h-0 -mb-2 pt-2 ">
+          <PubPageWidthSetter
+            pageWidth={pageWidth}
+            setPageWidth={setPageWidth}
+            thisPicker="page-width"
+            openPicker={openPicker}
+            setOpenPicker={setOpenPicker}
+          />
+          <div className="themeBGLeaflet flex flex-col">
+            <div
+              className={`themeBgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
+            >
+              <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
+                <BackgroundPicker
+                  bgImage={image}
+                  setBgImage={setImage}
+                  backgroundColor={localPubTheme.bgLeaflet}
+                  pageBackground={localPubTheme.bgPage}
+                  setPageBackground={(color) => {
+                    setTheme((t) => ({ ...t, bgPage: color }));
+                  }}
+                  setBackgroundColor={(color) => {
+                    setTheme((t) => ({ ...t, bgLeaflet: color }));
+                  }}
+                  openPicker={openPicker}
+                  setOpenPicker={setOpenPicker}
+                  hasPageBackground={!!showPageBackground}
+                  setHasPageBackground={setShowPageBackground}
+                />
+              </div>
+
+              <SectionArrow
+                fill="white"
+                stroke="#CCCCCC"
+                className="ml-2 -mt-[1px]"
+              />
+            </div>
+          </div>
 
-      <div className="themeSetterContent flex flex-col w-full overflow-y-scroll -mb-2 mt-2 ">
-        <PubPageWidthSetter
-          pageWidth={pageWidth}
-          setPageWidth={setPageWidth}
-          thisPicker="page-width"
-          openPicker={openPicker}
-          setOpenPicker={setOpenPicker}
-        />
-        <div className="themeBGLeaflet flex flex-col">
           <div
-            className={`themeBgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
+            style={{
+              backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
+              backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+              backgroundPosition: "center",
+              backgroundSize: !leafletBGRepeat
+                ? "cover"
+                : `calc(${leafletBGRepeat}px / 2 )`,
+            }}
+            className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md  border border-border `}
           >
-            <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
-              <BackgroundPicker
-                bgImage={image}
-                setBgImage={setImage}
-                backgroundColor={localPubTheme.bgLeaflet}
+            <div className={`flex flex-col  gap-3 z-10`}>
+              <PagePickers
                 pageBackground={localPubTheme.bgPage}
+                primary={localPubTheme.primary}
                 setPageBackground={(color) => {
                   setTheme((t) => ({ ...t, bgPage: color }));
                 }}
-                setBackgroundColor={(color) => {
-                  setTheme((t) => ({ ...t, bgLeaflet: color }));
+                setPrimary={(color) => {
+                  setTheme((t) => ({ ...t, primary: color }));
+                }}
+                openPicker={openPicker}
+                setOpenPicker={(pickers) => setOpenPicker(pickers)}
+                hasPageBackground={showPageBackground}
+              />
+              <PubAccentPickers
+                accent1={localPubTheme.accent1}
+                setAccent1={(color) => {
+                  setTheme((t) => ({ ...t, accent1: color }));
+                }}
+                accent2={localPubTheme.accent2}
+                setAccent2={(color) => {
+                  setTheme((t) => ({ ...t, accent2: color }));
                 }}
                 openPicker={openPicker}
-                setOpenPicker={setOpenPicker}
-                hasPageBackground={!!showPageBackground}
-                setHasPageBackground={setShowPageBackground}
+                setOpenPicker={(pickers) => setOpenPicker(pickers)}
               />
             </div>
-
-            <SectionArrow
-              fill="white"
-              stroke="#CCCCCC"
-              className="ml-2 -mt-[1px]"
-            />
           </div>
-        </div>
-
-        <div
-          style={{
-            backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
-            backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
-            backgroundPosition: "center",
-            backgroundSize: !leafletBGRepeat
-              ? "cover"
-              : `calc(${leafletBGRepeat}px / 2 )`,
-          }}
-          className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md  border border-border `}
-        >
-          <div className={`flex flex-col  gap-3 z-10`}>
-            <PagePickers
-              pageBackground={localPubTheme.bgPage}
-              primary={localPubTheme.primary}
-              setPageBackground={(color) => {
-                setTheme((t) => ({ ...t, bgPage: color }));
-              }}
-              setPrimary={(color) => {
-                setTheme((t) => ({ ...t, primary: color }));
-              }}
-              openPicker={openPicker}
-              setOpenPicker={(pickers) => setOpenPicker(pickers)}
-              hasPageBackground={showPageBackground}
-            />
-            <PubAccentPickers
-              accent1={localPubTheme.accent1}
-              setAccent1={(color) => {
-                setTheme((t) => ({ ...t, accent1: color }));
-              }}
-              accent2={localPubTheme.accent2}
-              setAccent2={(color) => {
-                setTheme((t) => ({ ...t, accent2: color }));
-              }}
-              openPicker={openPicker}
-              setOpenPicker={(pickers) => setOpenPicker(pickers)}
-            />
-          </div>
-        </div>
-        <div className="flex flex-col mt-4 ">
-          <div className="flex gap-2 items-center text-sm  text-[#8C8C8C]">
-            <div className="text-sm">Preview</div>
-            <Separator classname="h-4!" />{" "}
-            <button
-              className={`${sample === "pub" ? "font-bold  text-[#595959]" : ""}`}
-              onClick={() => setSample("pub")}
-            >
-              Pub
-            </button>
-            <button
-              className={`${sample === "post" ? "font-bold  text-[#595959]" : ""}`}
-              onClick={() => setSample("post")}
-            >
-              Post
-            </button>
+          <div className="flex flex-col mt-4 ">
+            <div className="flex gap-2 items-center text-sm  text-[#8C8C8C]">
+              <div className="text-sm">Preview</div>
+              <Separator classname="h-4!" />{" "}
+              <button
+                className={`${sample === "pub" ? "font-bold  text-[#595959]" : ""}`}
+                onClick={() => setSample("pub")}
+              >
+                Pub
+              </button>
+              <button
+                className={`${sample === "post" ? "font-bold  text-[#595959]" : ""}`}
+                onClick={() => setSample("post")}
+              >
+                Post
+              </button>
+            </div>
+            {sample === "pub" ? (
+              <SamplePub
+                pubBGImage={pubBGImage}
+                pubBGRepeat={leafletBGRepeat}
+                showPageBackground={showPageBackground}
+              />
+            ) : (
+              <SamplePost
+                pubBGImage={pubBGImage}
+                pubBGRepeat={leafletBGRepeat}
+                showPageBackground={showPageBackground}
+              />
+            )}
           </div>
-          {sample === "pub" ? (
-            <SamplePub
-              pubBGImage={pubBGImage}
-              pubBGRepeat={leafletBGRepeat}
-              showPageBackground={showPageBackground}
-            />
-          ) : (
-            <SamplePost
-              pubBGImage={pubBGImage}
-              pubBGRepeat={leafletBGRepeat}
-              showPageBackground={showPageBackground}
-            />
-          )}
         </div>
       </div>
     </BaseThemeProvider>
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
index b68e51b6..40d0e6ea 100644
--- a/components/ThemeManager/ThemeProvider.tsx
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -122,6 +122,7 @@ export const BaseThemeProvider = ({
   showPageBackground,
   pageWidth,
   hasBackgroundImage,
+  className,
   children,
 }: {
   local?: boolean;
@@ -136,6 +137,7 @@ export const BaseThemeProvider = ({
   highlight2: AriaColor;
   highlight3: AriaColor;
   pageWidth?: number;
+  className?: string;
   children: React.ReactNode;
 }) => {
   // When showPageBackground is false and there's no background image,
@@ -239,7 +241,7 @@ export const BaseThemeProvider = ({
   ]);
   return (
     <div
-      className="leafletWrapper w-full text-primary h-full min-h-fit flex flex-col bg-center items-stretch "
+      className={`leafletWrapper w-full text-primary h-full min-h-fit flex flex-col bg-center items-stretch ${className || ""}`}
       style={
         {
           "--bg-leaflet": colorToString(bgLeaflet, "rgb"),
-- 
2.51.2