chore: modal animations

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -239,18 +239,16 @@ const ChallengeModal: FunctionComponent<Props> = ({ application, mainApplication
       ref={setModalElement}
       close={cancelChallenge}
       hideOnInteractOutside={false}
+      backdropClassName={isFullScreenBlocker ? 'bg-passive-5' : ''}
+      className={classNames(
+        'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max',
+        !isMobileScreen && 'shadow-overlay-light',
+        isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
+      )}
     >
       <Modal
         title="Authenticate"
         close={cancelChallenge}
-        className={{
-          content: classNames(
-            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border md:translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
-            !isMobileScreen && 'shadow-overlay-light',
-            isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
-          ),
-          backdrop: isFullScreenBlocker ? 'bg-passive-5' : '',
-        }}
         customHeader={<></>}
         customFooter={<></>}
         disableCustomHeader={isMobileScreen}

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -253,7 +253,11 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
           />
         )}
       </ModalOverlay>
-      <ModalOverlay isOpen={showSuperNoteConverter} close={closeSuperNoteConverter}>
+      <ModalOverlay
+        isOpen={showSuperNoteConverter}
+        close={closeSuperNoteConverter}
+        className="md:h-full md:max-h-[90%]"
+      >
         {note && pendingConversionItem && (
           <SuperNoteConverter
             note={note}

packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx

@@ -103,10 +103,7 @@ const EditorWidthSelectionModal = ({
       customFooter={<></>}
       disableCustomHeader={isMobileScreen}
       actions={actions}
-      className={{
+      className="flex min-h-[50vh] flex-col"
-        content: 'select-none md:min-w-[40vw]',
-        description: 'flex min-h-[50vh] flex-col',
-      }}
     >
       <div className="flex min-h-0 flex-grow flex-col overflow-hidden rounded bg-passive-5 p-4 pb-0">
         <div
@@ -195,7 +192,7 @@ const EditorWidthSelectionModalWrapper = () => {
   }, [application, toggle])
 
   return (
-    <ModalOverlay isOpen={isOpen} close={toggle}>
+    <ModalOverlay isOpen={isOpen} close={toggle} className="select-none md:min-w-[40vw]">
       <EditorWidthSelectionModal initialValue={lineWidth} handleChange={setLineWidth} close={toggle} note={note} />
     </ModalOverlay>
   )

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -117,11 +117,6 @@ const FilePreviewModal = observer(({ application }: Props) => {
     <Modal
       title={currentFile.name}
       close={dismiss}
-      className={{
-        content: classNames(
-          'm-0 flex h-full w-full flex-col rounded bg-[--popover-background-color] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
-        ),
-      }}
       actions={[
         {
           label: 'Done',
@@ -281,6 +276,7 @@ const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application }) => {
       aria-label="File preview modal"
       isOpen={application.filePreviewModalController.isOpen}
       close={application.filePreviewModalController.dismiss}
+      className="md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]"
     >
       <FilePreviewModal application={application} />
     </ModalOverlay>

packages/web/src/javascripts/Components/Modal/Modal.tsx

@@ -22,11 +22,7 @@ type Props = {
   title: string
   close: () => void
   actions?: ModalAction[]
-  className?: {
+  className?: string
-    content?: string
-    description?: string
-    backdrop?: string
-  }
   customHeader?: ReactNode
   disableCustomHeader?: boolean
   customFooter?: ReactNode
@@ -37,7 +33,7 @@ const Modal = ({
   title,
   close,
   actions = [],
-  className = {},
+  className,
   customHeader,
   disableCustomHeader = false,
   customFooter,
@@ -97,133 +93,121 @@ const Modal = ({
   return (
     <>
       <ModalAndroidBackHandler close={close} />
-      <div
+      {customHeader && !disableCustomHeader ? (
-        className={classNames('absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75', className?.backdrop)}
+        customHeader
-        role="presentation"
+      ) : (
-        onClick={close}
+        <div
-      />
+          className={classNames(
-      <div
+            'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3 md:translucent-ui:bg-transparent',
-        className={classNames(
+            hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
-          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          )}
-          className?.content,
+        >
-        )}
+          <MobileModalHeader className="flex-row items-center justify-between md:flex md:gap-0">
-      >
+            {leftSlotAction ? (
-        {customHeader && !disableCustomHeader ? (
+              <MobileModalAction
-          customHeader
+                type={leftSlotAction.type}
-        ) : (
+                action={leftSlotAction.onClick}
-          <div
+                disabled={leftSlotAction.disabled}
-            className={classNames(
+                slot="left"
-              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3 md:translucent-ui:bg-transparent',
-              hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
-            )}
-          >
-            <MobileModalHeader className="flex-row items-center justify-between md:flex md:gap-0">
-              {leftSlotAction ? (
-                <MobileModalAction
-                  type={leftSlotAction.type}
-                  action={leftSlotAction.onClick}
-                  disabled={leftSlotAction.disabled}
-                  slot="left"
-                >
-                  {leftSlotAction.label}
-                </MobileModalAction>
-              ) : (
-                <div className="md:hidden" />
-              )}
-              <div className="flex items-center justify-center gap-2 overflow-hidden text-center font-semibold text-text md:flex-grow md:text-left md:text-lg">
-                {extraActions.length > 0 && (
-                  <>
-                    <MobileModalAction
-                      type="secondary"
-                      action={() => setShowAdvanced((show) => !show)}
-                      slot="left"
-                      ref={advancedOptionRef}
-                    >
-                      <div className="rounded-full border border-border p-0.5">
-                        <Icon type="more" />
-                      </div>
-                    </MobileModalAction>
-                    <Popover
-                      title="Advanced"
-                      open={showAdvanced}
-                      anchorElement={advancedOptionRef.current}
-                      disableMobileFullscreenTakeover={true}
-                      togglePopover={() => setShowAdvanced((show) => !show)}
-                      align="start"
-                      portal={false}
-                      className="!fixed divide-y divide-border border border-border"
-                    >
-                      {extraActions
-                        .filter((action) => action.type !== 'cancel')
-                        .map((action, index) => (
-                          <button
-                            className={classNames(
-                              'p-2 text-base font-semibold hover:bg-contrast focus:bg-info-backdrop focus:shadow-none focus:outline-none',
-                              action.type === 'destructive' && 'text-danger',
-                            )}
-                            key={index}
-                            onClick={() => {
-                              action.onClick()
-                              setShowAdvanced(false)
-                            }}
-                            disabled={action.disabled}
-                          >
-                            {action.label}
-                          </button>
-                        ))}
-                    </Popover>
-                  </>
-                )}
-                <span className="overflow-hidden text-ellipsis whitespace-nowrap ">{title}</span>
-              </div>
-              <div className="hidden items-center gap-2 md:flex">
-                <button tabIndex={0} className="ml-2 rounded p-1 font-bold hover:bg-contrast" onClick={close}>
-                  <Icon type="close" />
-                </button>
-              </div>
-              {rightSlotAction ? (
-                <MobileModalAction
-                  type={rightSlotAction.type}
-                  action={rightSlotAction.onClick}
-                  disabled={rightSlotAction.disabled}
-                  slot="right"
-                >
-                  {rightSlotAction.label}
-                </MobileModalAction>
-              ) : null}
-            </MobileModalHeader>
-          </div>
-        )}
-        <div className={classNames('flex-grow overflow-y-auto', className.description)}>{children}</div>
-        {customFooter
-          ? customFooter
-          : sortedActions.length > 0 && (
-              <div
-                className={classNames(
-                  'hidden items-center justify-start gap-3 border-t border-border px-2.5 py-2 md:flex md:px-4 md:py-4',
-                  hasBottomInset && 'pb-safe-bottom',
-                )}
               >
-                {sortedActions.map((action, index) => (
+                {leftSlotAction.label}
-                  <Button
+              </MobileModalAction>
-                    primary={action.type === 'primary'}
+            ) : (
-                    colorStyle={action.type === 'destructive' ? 'danger' : undefined}
+              <div className="md:hidden" />
-                    key={index}
-                    onClick={action.onClick}
-                    className={classNames(
-                      action.mobileSlot ? 'hidden md:block' : '',
-                      index === firstPrimaryActionIndex && 'ml-auto',
-                    )}
-                    data-type={action.type}
-                    disabled={action.disabled}
-                    small={isMobileScreen}
-                  >
-                    {action.label}
-                  </Button>
-                ))}
-              </div>
             )}
-      </div>
+            <div className="flex items-center justify-center gap-2 overflow-hidden text-center font-semibold text-text md:flex-grow md:text-left md:text-lg">
+              {extraActions.length > 0 && (
+                <>
+                  <MobileModalAction
+                    type="secondary"
+                    action={() => setShowAdvanced((show) => !show)}
+                    slot="left"
+                    ref={advancedOptionRef}
+                  >
+                    <div className="rounded-full border border-border p-0.5">
+                      <Icon type="more" />
+                    </div>
+                  </MobileModalAction>
+                  <Popover
+                    title="Advanced"
+                    open={showAdvanced}
+                    anchorElement={advancedOptionRef.current}
+                    disableMobileFullscreenTakeover={true}
+                    togglePopover={() => setShowAdvanced((show) => !show)}
+                    align="start"
+                    portal={false}
+                    className="!fixed divide-y divide-border border border-border"
+                  >
+                    {extraActions
+                      .filter((action) => action.type !== 'cancel')
+                      .map((action, index) => (
+                        <button
+                          className={classNames(
+                            'p-2 text-base font-semibold hover:bg-contrast focus:bg-info-backdrop focus:shadow-none focus:outline-none',
+                            action.type === 'destructive' && 'text-danger',
+                          )}
+                          key={index}
+                          onClick={() => {
+                            action.onClick()
+                            setShowAdvanced(false)
+                          }}
+                          disabled={action.disabled}
+                        >
+                          {action.label}
+                        </button>
+                      ))}
+                  </Popover>
+                </>
+              )}
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap ">{title}</span>
+            </div>
+            <div className="hidden items-center gap-2 md:flex">
+              <button tabIndex={0} className="ml-2 rounded p-1 font-bold hover:bg-contrast" onClick={close}>
+                <Icon type="close" />
+              </button>
+            </div>
+            {rightSlotAction ? (
+              <MobileModalAction
+                type={rightSlotAction.type}
+                action={rightSlotAction.onClick}
+                disabled={rightSlotAction.disabled}
+                slot="right"
+              >
+                {rightSlotAction.label}
+              </MobileModalAction>
+            ) : null}
+          </MobileModalHeader>
+        </div>
+      )}
+      <div className={classNames('flex-grow overflow-y-auto', className)}>{children}</div>
+      {customFooter
+        ? customFooter
+        : sortedActions.length > 0 && (
+            <div
+              className={classNames(
+                'hidden items-center justify-start gap-3 border-t border-border px-2.5 py-2 md:flex md:px-4 md:py-4',
+                hasBottomInset && 'pb-safe-bottom',
+              )}
+            >
+              {sortedActions.map((action, index) => (
+                <Button
+                  primary={action.type === 'primary'}
+                  colorStyle={action.type === 'destructive' ? 'danger' : undefined}
+                  key={index}
+                  onClick={action.onClick}
+                  className={classNames(
+                    action.mobileSlot ? 'hidden md:block' : '',
+                    index === firstPrimaryActionIndex && 'ml-auto',
+                  )}
+                  data-type={action.type}
+                  disabled={action.disabled}
+                  small={isMobileScreen}
+                >
+                  {action.label}
+                </Button>
+              ))}
+            </div>
+          )}
     </>
   )
 }

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -1,22 +1,42 @@
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { Dialog, DialogOptions, useDialogStore } from '@ariakit/react'
-import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react'
+import { ForwardedRef, forwardRef, ReactNode, useCallback, useId } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
+import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
+import { classNames } from '@standardnotes/snjs'
 
 type Props = {
   isOpen: boolean
   children: ReactNode
+  animate?: 'mobile' | 'desktop' | 'both'
   animationVariant?: 'horizontal' | 'vertical'
   close: () => void
+  className?: string
+  backdropClassName?: string
 }
 
 const ModalOverlay = forwardRef(
   (
-    { isOpen, children, animationVariant, close, ...props }: Props & Partial<DialogOptions>,
+    {
+      isOpen,
+      children,
+      animationVariant,
+      close,
+      className,
+      backdropClassName,
+      animate,
+      ...props
+    }: Props & Partial<DialogOptions>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const [isMounted, setElement] = useModalAnimation(isOpen, animationVariant)
+    const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+    const [isMounted, setElement] = useModalAnimation(
+      isOpen,
+      isMobileScreen,
+      animationVariant,
+      (animate === 'mobile' && !isMobileScreen) || (animate === 'desktop' && isMobileScreen),
+    )
     const dialog = useDialogStore({
       open: isMounted,
       setOpen: (open) => {
@@ -24,8 +44,23 @@ const ModalOverlay = forwardRef(
           close()
         }
       },
+      animated: !isMobileScreen,
     })
 
+    const portalId = useId()
+    const getPortalElement = useCallback(() => {
+      const id = 'portal/' + portalId
+      const existing = document.getElementById(id)
+      if (existing) {
+        return existing
+      }
+      const div = document.createElement('div')
+      div.id = id
+      div.className = 'fixed flex items-center justify-center left-0 top-0 z-modal h-full w-full pointer-events-none'
+      document.body.appendChild(div)
+      return div
+    }, [portalId])
+
     const addCloseMethod = useCallback(
       (element: HTMLDivElement | null) => {
         if (element) {
@@ -42,11 +77,25 @@ const ModalOverlay = forwardRef(
     return (
       <Dialog
         tabIndex={0}
-        className="fixed flex items-center justify-center left-0 top-0 z-modal h-full w-full"
+        className={classNames(
+          'pointer-events-auto m-0 flex h-full w-full flex-col border-[--popover-border-color] bg-default md:bg-[--popover-background-color] md:[backdrop-filter:var(--popover-backdrop-filter)] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          className,
+        )}
+        backdrop={
+          <div
+            className={classNames(
+              'absolute z-0 h-full w-full bg-passive-5 opacity-0 pointer-events-auto',
+              'md:transition-opacity md:duration-75 md:opacity-50 [&[data-enter]]:md:opacity-75',
+              backdropClassName,
+            )}
+            onClick={close}
+          />
+        }
         ref={mergeRefs([setElement, addCloseMethod, ref])}
         store={dialog}
         modal={false}
         portal={true}
+        portalElement={getPortalElement}
         preventBodyScroll={true}
         hideOnInteractOutside={false}
         {...props}

packages/web/src/javascripts/Components/Modal/useModalAnimation.ts

@@ -1,5 +1,4 @@
 import { useLifecycleAnimation } from '@/Hooks/useLifecycleAnimation'
-import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 export const IosModalAnimationEasing = 'cubic-bezier(.36,.66,.04,1)'
 
@@ -52,40 +51,80 @@ const Animations = {
       transformOrigin: 'right',
     },
   },
+  nonMobile: {
+    enter: {
+      keyframes: [
+        {
+          transform: 'scale(0.95)',
+          opacity: 0,
+        },
+        {
+          transform: 'scale(1)',
+          opacity: 1,
+        },
+      ],
+      transformOrigin: 'center',
+    },
+    exit: {
+      keyframes: [
+        {
+          transform: 'scale(1)',
+          opacity: 1,
+        },
+        {
+          transform: 'scale(0.95)',
+          opacity: 0,
+        },
+      ],
+      transformOrigin: 'center',
+    },
+  },
 }
 
-export const useModalAnimation = (isOpen: boolean, variant: 'horizontal' | 'vertical' = 'vertical') => {
+const MobileOptions = {
-  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  easing: IosModalAnimationEasing,
+  duration: 250,
+  fill: 'forwards',
+}
 
+const NonMobileOptions = {
+  duration: 75,
+}
+
+export const useModalAnimation = (
+  isOpen: boolean,
+  isMobileScreen: boolean,
+  variant: 'horizontal' | 'vertical' = 'vertical',
+  disabled = false,
+) => {
   return useLifecycleAnimation(
     {
       open: isOpen,
       enter: {
-        keyframes: Animations[variant].enter.keyframes,
+        keyframes: isMobileScreen ? Animations[variant].enter.keyframes : Animations.nonMobile.enter.keyframes,
-        options: {
+        options: isMobileScreen ? MobileOptions : NonMobileOptions,
-          easing: IosModalAnimationEasing,
-          duration: 250,
-          fill: 'forwards',
-        },
         initialStyle: {
-          transformOrigin: Animations[variant].enter.transformOrigin,
+          transformOrigin: isMobileScreen
+            ? Animations[variant].enter.transformOrigin
+            : Animations.nonMobile.enter.transformOrigin,
         },
       },
       enterCallback: (element) => {
+        if (!isMobileScreen) {
+          return
+        }
         element.scrollTop = 0
       },
       exit: {
-        keyframes: Animations[variant].exit.keyframes,
+        keyframes: isMobileScreen ? Animations[variant].exit.keyframes : Animations.nonMobile.exit.keyframes,
-        options: {
+        options: isMobileScreen ? MobileOptions : NonMobileOptions,
-          easing: IosModalAnimationEasing,
-          duration: 250,
-          fill: 'forwards',
-        },
         initialStyle: {
-          transformOrigin: Animations[variant].exit.transformOrigin,
+          transformOrigin: isMobileScreen
+            ? Animations[variant].exit.transformOrigin
+            : Animations.nonMobile.exit.transformOrigin,
         },
       },
     },
-    !isMobileScreen,
+    disabled,
   )
 }

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

@@ -165,10 +165,7 @@ const NoteConflictResolutionModal = ({
   return (
     <Modal
       title="Resolve conflicts"
-      className={{
+      className="flex flex-col overflow-x-hidden md:flex-row"
-        content: 'md:h-full md:w-[70vw]',
-        description: 'flex flex-col overflow-x-hidden md:flex-row',
-      }}
       actions={actions}
       close={close}
       customFooter={

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

@@ -1031,7 +1031,11 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
           </div>
         </div>
 
-        <ModalOverlay isOpen={this.state.showConflictResolutionModal} close={this.toggleConflictResolutionModal}>
+        <ModalOverlay
+          isOpen={this.state.showConflictResolutionModal}
+          close={this.toggleConflictResolutionModal}
+          className="md:h-full md:w-[70vw]"
+        >
           <NoteConflictResolutionModal
             currentNote={this.note}
             conflictedNotes={this.state.conflictedNotes}

packages/web/src/javascripts/Components/NotesOptions/SuperExportModal.tsx

@@ -16,9 +16,7 @@ const SuperExportModal = ({ exportNotes, close }: Props) => {
   return (
     <Modal
       title="Export notes"
-      className={{
+      className="p-4"
-        description: 'p-4',
-      }}
       close={close}
       actions={[
         {

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx

@@ -35,7 +35,6 @@ const PermissionsModal = ({ callback, component, dismiss, permissionsString }: P
           mobileSlot: 'right',
         },
       ]}
-      className={{ content: 'md:!w-[350px]' }}
       customFooter={
         <ModalDialogButtons className="hidden md:flex">
           <Button primary fullWidth onClick={accept} className="block">

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx

@@ -40,7 +40,7 @@ const PermissionsModalWrapper: FunctionComponent<Props> = ({ application }) => {
   }, [application, onAppStart])
 
   return (
-    <ModalOverlay isOpen={!!dialog} close={dismissPermissionsDialog}>
+    <ModalOverlay isOpen={!!dialog} close={dismissPermissionsDialog} className="md:!w-[350px]">
       {dialog && (
         <PermissionsModal
           callback={dialog.callback}

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -7,6 +7,7 @@ import { useModalAnimation } from '../Modal/useModalAnimation'
 import MobileModalHeader from '../Modal/MobileModalHeader'
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
+import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 const DisableScroll = () => {
   useDisableBodyScrollOnMobile()
@@ -29,7 +30,8 @@ const MobilePopoverContent = ({
   id: string
   className?: string
 }) => {
-  const [isMounted, setPopoverElement] = useModalAnimation(open)
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  const [isMounted, setPopoverElement] = useModalAnimation(open, isMobileScreen)
 
   const addCloseMethod = useCallback(
     (element: HTMLDivElement | null) => {

packages/web/src/javascripts/Components/Portal/Portal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState, useEffect } from 'react'
+import { ReactNode, useState, useEffect, useId } from 'react'
 import { createPortal } from 'react-dom'
 
 type Props = {
@@ -6,18 +6,17 @@ type Props = {
   disabled?: boolean
 }
 
-const randomPortalId = () => Math.random()
-
 const Portal = ({ children, disabled = false }: Props) => {
   const [container, setContainer] = useState<HTMLElement>()
+  const id = 'portal/' + useId()
 
   useEffect(() => {
     const container = document.createElement('div')
-    container.id = `react-portal-${randomPortalId()}`
+    container.id = id
     document.body.append(container)
     setContainer(container)
     return () => container.remove()
-  }, [])
+  }, [id])
 
   if (disabled) {
     return <>{children}</>

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -60,10 +60,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({ application, clo
     <Modal
       close={closePreferences}
       title="Preferences"
-      className={{
+      className="flex flex-col"
-        content: 'md:h-full md:!max-h-full md:!w-full',
-        description: 'flex flex-col',
-      }}
       customHeader={
         <div
           className={classNames(

packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx

@@ -47,8 +47,10 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
     <ModalOverlay
       isOpen={application.preferencesController.isOpen}
       ref={setElement}
+      animate="mobile"
       animationVariant="horizontal"
       close={application.preferencesController.closePreferences}
+      className="md:h-full md:!max-h-full md:!w-full"
     >
       <PreferencesView
         closePreferences={application.preferencesController.closePreferences}

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx

@@ -5,6 +5,7 @@ import HistoryModalDialog from './HistoryModalDialog'
 import { RevisionHistoryModalProps } from './RevisionHistoryModalProps'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import { useModalAnimation } from '../Modal/useModalAnimation'
+import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({ application }) => {
   const addAndroidBackHandler = useAndroidBackHandler()
@@ -31,7 +32,8 @@ const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({ ap
     }
   }, [addAndroidBackHandler, application, isOpen])
 
-  const [isMounted, setElement] = useModalAnimation(isOpen)
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  const [isMounted, setElement] = useModalAnimation(isOpen, isMobileScreen)
 
   if (!isMounted) {
     return null

packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx

@@ -129,14 +129,7 @@ const SessionsModalContent: FunctionComponent<{
 
   return (
     <>
-      <Modal
+      <Modal title="Active Sessions" close={application.closeSessionsModal} actions={sessionModalActions}>
-        title="Active Sessions"
-        close={application.closeSessionsModal}
-        actions={sessionModalActions}
-        className={{
-          content: 'sessions-modal',
-        }}
-      >
         <div className="px-4 py-4">
           {refreshing ? (
             <div className="flex items-center gap-2">
@@ -215,7 +208,11 @@ const SessionsModal: FunctionComponent<{
   application: WebApplication
 }> = ({ application }) => {
   return (
-    <ModalOverlay isOpen={application.isSessionsModalVisible} close={application.closeSessionsModal}>
+    <ModalOverlay
+      isOpen={application.isSessionsModalVisible}
+      close={application.closeSessionsModal}
+      className="sessions-modal"
+    >
       <SessionsModalContent application={application} />
     </ModalOverlay>
   )

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

@@ -175,10 +175,7 @@ const SuperNoteConverter = ({
       title={`Convert to ${uiFeature.displayName}`}
       close={closeDialog}
       actions={modalActions}
-      className={{
+      className="flex flex-col !overflow-hidden"
-        content: 'md:h-full md:max-h-[90%]',
-        description: 'flex flex-col !overflow-hidden',
-      }}
     >
       {format === 'txt' || format === 'md' ? (
         <div className="flex items-start border-b border-border p-4 text-sm">