From db272bf146de45bfe2907801bf7657888b940012 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 27 Jul 2023 19:09:28 +0200
Subject: [PATCH] AdminX various cleanup (#17522)

refs. https://github.com/TryGhost/Product/issues/3349

- fixed textfield right placeholder bug
- fixed menu highlight when settings is searched
---
 apps/admin-x-settings/src/App.tsx                    |  2 +-
 .../src/admin-x-ds/global/form/TextField.tsx         |  4 ++--
 .../src/admin-x-ds/settings/SettingGroup.tsx         | 12 +++++++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/admin-x-settings/src/App.tsx b/apps/admin-x-settings/src/App.tsx
index 6e8ed8b29f..815604a274 100644
--- a/apps/admin-x-settings/src/App.tsx
+++ b/apps/admin-x-settings/src/App.tsx
@@ -33,7 +33,7 @@ function App({ghostVersion, officialThemes}: AppProps) {
                                 </div>
 
                                 {/* Main container */}
-                                <div className="mx-auto flex max-w-[1080px] flex-col px-[5vmin] py-[12vmin] md:flex-row md:items-start md:gap-x-10 md:py-[8vmin]">
+                                <div className="mx-auto flex max-w-[1080px] flex-col px-[5vmin] py-[12vmin] md:flex-row md:items-start md:gap-x-10 md:py-[8vmin]" id="admin-x-settings-content">
 
                                     {/* Sidebar */}
                                     <div className="relative z-20 min-w-[260px] grow-0 md:fixed md:top-[8vmin] md:basis-[260px]">
diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
index 4d529bf27c..099e2657ca 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
@@ -75,12 +75,12 @@ const TextField: React.FC<TextFieldProps> = ({
 
     if (rightPlaceholder) {
         const rightPHClasses = !unstyled && clsx(
-            'h-10 border-b py-2 text-right text-grey-500',
+            'order-3 h-10 border-b py-2 text-right text-grey-500',
             error ? `border-red` : `${disabled ? 'border-grey-300' : 'border-grey-500 peer-hover:border-grey-700 peer-focus:border-black'}`
         );
 
         field = (
-            <div className='flex w-full items-center'>
+            <div className='order-2 flex w-full items-center'>
                 {inputField}
                 <span className={rightPHClasses || ''}>{rightPlaceholder}</span>
             </div>
diff --git a/apps/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx b/apps/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx
index 7443e7fa95..6d98dd5549 100644
--- a/apps/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx
@@ -58,7 +58,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({
     const {yScroll, updateScrolled, route} = useRouting();
     const [highlight, setHighlight] = useState(false);
     const scrollRef = useRef<HTMLDivElement | null>(null);
-    const [currentRect, setCurrentRect] = useState<DOMRect>(DOMRect.fromRect());
+    const [currentRect, setCurrentRect] = useState<{top: number, bottom: number}>({top: 0, bottom: 0});
     const topOffset = -193.5;
     const bottomOffset = 36;
 
@@ -134,9 +134,15 @@ const SettingGroup: React.FC<SettingGroupProps> = ({
 
     useEffect(() => {
         if (scrollRef.current) {
-            setCurrentRect(scrollRef.current.getBoundingClientRect());
+            const rootElement = document.getElementById('admin-x-settings-content');
+            const rootRect = rootElement?.getBoundingClientRect();
+            const sectionRect = scrollRef.current.getBoundingClientRect();
+            setCurrentRect({
+                top: sectionRect.top - rootRect!.top,
+                bottom: (sectionRect.top - rootRect!.top) + sectionRect.height
+            });
         }
-    }, [checkVisible]);
+    }, [checkVisible, navid]);
 
     useEffect(() => {
         if (currentRect.top && yScroll! >= currentRect.top + topOffset && yScroll! < currentRect.bottom + topOffset + bottomOffset) {