fix(mobile): super editor autocomplete dropdowns (#2019)

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx

@@ -21,6 +21,7 @@ import { GetDynamicTableBlocks, GetTableBlock } from './Blocks/Table'
 import Popover from '@/Components/Popover/Popover'
 import { PopoverClassNames } from '../ClassNames'
 import { GetDatetimeBlocks } from './Blocks/DateTime'
+import { isMobileScreen } from '@/Utils'
 
 export default function BlockPickerMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
@@ -109,12 +110,14 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
               align="start"
               anchorPoint={{
                 x: anchorElementRef.current.offsetLeft,
-                y: anchorElementRef.current.offsetTop + anchorElementRef.current.offsetHeight,
+                y: anchorElementRef.current.offsetTop + (!isMobileScreen() ? anchorElementRef.current.offsetHeight : 0),
               }}
               open={popoverOpen}
               togglePopover={() => {
                 setPopoverOpen((prevValue) => !prevValue)
               }}
+              disableMobileFullscreenTakeover={true}
+              side={isMobileScreen() ? 'top' : 'bottom'}
             >
               <div className={PopoverClassNames}>
                 <ul>

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx

@@ -11,6 +11,7 @@ import Popover from '@/Components/Popover/Popover'
 import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
 import { useLinkingController } from '../../../../../Controllers/LinkingControllerProvider'
 import { PopoverClassNames } from '../ClassNames'
+import { isMobileScreen } from '@/Utils'
 
 type Props = {
   currentNote: SNNote
@@ -106,12 +107,14 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
             align="start"
             anchorPoint={{
               x: anchorElementRef.current.offsetLeft,
-              y: anchorElementRef.current.offsetTop + anchorElementRef.current.offsetHeight,
+              y: anchorElementRef.current.offsetTop + (!isMobileScreen() ? anchorElementRef.current.offsetHeight : 0),
             }}
             open={popoverOpen}
             togglePopover={() => {
               setPopoverOpen((prevValue) => !prevValue)
             }}
+            disableMobileFullscreenTakeover={true}
+            side={isMobileScreen() ? 'top' : 'bottom'}
           >
             <div className={PopoverClassNames}>
               <ul>

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx

@@ -102,7 +102,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
               <BlocksEditor
                 onChange={handleChange}
                 ignoreFirstChange={true}
-                className="relative relative h-full resize-none text-base focus:shadow-none focus:outline-none"
+                className="relative h-full resize-none text-base focus:shadow-none focus:outline-none"
                 previewLength={NotePreviewCharLimit}
                 spellcheck={spellcheck}
               >