Reader display setting positioning

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)
           }

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()

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' }}>

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)
           }