From c251de12d90e01a5c36d30bd868b675d6c559b22 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 28 Feb 2023 18:20:26 +0800
Subject: [PATCH] Reader display setting positioning

---
 .../templates/article/ArticleActionsMenu.tsx  |  2 +-
 .../article/DisplaySettingsModal.tsx          | 20 +++++++++++--------
 .../article/ReaderSettingsControl.tsx         |  3 ---
 .../web/pages/[username]/[slug]/index.tsx     |  1 -
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index bce3703d3..312236eff 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -212,8 +212,8 @@ export function ArticleActionsMenu(
       {readerSettings.showEditDisplaySettingsModal && (
         <DisplaySettingsModal
           centerX={props.layout != 'side'}
+          readerSettings={readerSettings}
           triggerElementRef={displaySettingsButtonRef}
-          articleActionHandler={props.articleActionHandler}
           onOpenChange={() =>
             readerSettings.setShowEditDisplaySettingsModal(false)
           }
diff --git a/packages/web/components/templates/article/DisplaySettingsModal.tsx b/packages/web/components/templates/article/DisplaySettingsModal.tsx
index 133614401..b736db31e 100644
--- a/packages/web/components/templates/article/DisplaySettingsModal.tsx
+++ b/packages/web/components/templates/article/DisplaySettingsModal.tsx
@@ -1,6 +1,10 @@
 import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { VStack } from '../../elements/LayoutPrimitives'
-import { ModalRoot, ModalContent } from '../../elements/ModalPrimitives'
+import {
+  ModalRoot,
+  ModalContent,
+  ModalOverlay,
+} from '../../elements/ModalPrimitives'
 import { ReaderSettingsControl } from './ReaderSettingsControl'
 
 type DisplaySettingsModalProps = {
@@ -20,17 +24,17 @@ export function DisplaySettingsModal(
 
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+      <ModalOverlay />
       <ModalContent
         css={{
           width: '345px',
           padding: '0px',
-          top: props.triggerElementRef?.current ? top : '50%',
-          left: props.triggerElementRef?.current
-            ? left - (props.centerX ? 265 / 2 : 0)
-            : '50%',
-          transform: props.triggerElementRef?.current
-            ? 'unset'
-            : 'translate(-50%, -50%)',
+          top: '300px',
+          left: 'calc(100% - 250px)',
+          '@lgDown': {
+            top: '300px',
+            left: '50%',
+          },
         }}
         onPointerDownOutside={(event) => {
           event.preventDefault()
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 9dba252ca..609544683 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -203,9 +203,6 @@ function LayoutControls(props: LayoutControlsProps): JSX.Element {
           pb: '10px',
           width: '100%',
           height: '100%',
-          '@smDown': {
-            display: 'none',
-          },
         }}
       >
         <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index b1d063369..ea7a6010e 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -390,7 +390,6 @@ export default function Home(): JSX.Element {
         <DisplaySettingsModal
           centerX={true}
           readerSettings={readerSettings}
-          articleActionHandler={actionHandler}
           onOpenChange={() =>
             readerSettings.setShowEditDisplaySettingsModal(false)
           }