fix: make modals mobile-friendly (#1337)

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

@@ -25,7 +25,7 @@ const PermissionsModal = ({ callback, component, dismiss, permissionsString }: P
   }, [callback, dismiss])
 
   return (
-    <ModalDialog className="!w-[350px]">
+    <ModalDialog className="w-full md:!w-[350px]">
       <ModalDialogLabel closeDialog={deny}>Activate Component</ModalDialogLabel>
       <ModalDialogDescription>
         <div className="text-base">
@@ -33,7 +33,7 @@ const PermissionsModal = ({ callback, component, dismiss, permissionsString }: P
           {' would like to interact with your '}
           {permissionsString}
         </div>
-        <div className="sk-panel-row">
+        <div className="sk-panel-row [word-break:break-word]">
           <p className="sk-p">
             Components use an offline messaging system to communicate. Learn more at{' '}
             <a href="https://standardnotes.com/permissions" rel="noopener" target="_blank" className="sk-a info">

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Bullet.tsx

@@ -5,7 +5,7 @@ type Props = {
 }
 
 const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
-  <div className={`min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
+  <div className={`inline-block min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
 )
 
 export default Bullet

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/SaveSecretKey.tsx

@@ -39,9 +39,8 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
       </ModalDialogLabel>
       <ModalDialogDescription className="h-33 flex flex-row items-center">
         <div className="flex flex-grow flex-col">
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row flex-wrap items-center gap-1">
             <Bullet />
-            <div className="min-w-1" />
             <div className="text-sm">
               <b>Save your secret key</b>{' '}
               <a
@@ -52,11 +51,11 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
               </a>
               :
             </div>
-            <div className="min-w-2" />
             <DecoratedInput
               disabled={true}
               right={[<CopyButton copyValue={act.secretKey} />, download]}
               value={act.secretKey}
+              className={{ container: 'ml-2' }}
             />
           </div>
           <div className="h-2" />

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/ScanQRCode.tsx

@@ -20,11 +20,10 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
   return (
     <ModalDialog>
       <ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
-      <ModalDialogDescription className="h-33 flex flex-row items-center">
+      <ModalDialogDescription className="h-33 flex flex-col items-center gap-5 md:flex-row">
         <div className="w-25 h-25 flex items-center justify-center bg-info">
           <QRCode className="border-neutral-contrast-bg border-2 border-solid" value={act.qrCode} size={100} />
         </div>
-        <div className="min-w-5" />
         <div className="flex flex-grow flex-col gap-2">
           <div className="flex flex-row items-center">
             <Bullet />

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Verification.tsx

@@ -20,24 +20,30 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
     <ModalDialog>
       <ModalDialogLabel closeDialog={act.cancelActivation}>Step 3 of 3 - Verification</ModalDialogLabel>
       <ModalDialogDescription className="h-33 flex flex-row items-center">
-        <div className="flex flex-grow flex-col">
+        <div className="flex flex-grow flex-col gap-4">
-          <div className="mb-4 flex flex-row items-center">
+          <div className="flex flex-row flex-wrap items-center gap-1">
-            <Bullet />
-            <div className="min-w-1" />
             <div className="text-sm">
-              Enter your <b>secret key</b>:
+              <Bullet className="align-middle" />
+              <span className="align-middle">
+                Enter your <b>secret key</b>:
+              </span>
             </div>
-            <div className="min-w-2" />
+            <DecoratedInput
-            <DecoratedInput className={{ container: `w-92 ${secretKeyClass}` }} onChange={act.setInputSecretKey} />
+              className={{ container: `ml-2 w-full md:w-96 ${secretKeyClass}` }}
+              onChange={act.setInputSecretKey}
+            />
           </div>
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row flex-wrap items-center gap-1">
-            <Bullet />
-            <div className="min-w-1" />
             <div className="text-sm">
-              Verify the <b>authentication code</b> generated by your authenticator app:
+              <Bullet className="align-middle" />
+              <span className="align-middle">
+                Verify the <b>authentication code</b> generated by your authenticator app:
+              </span>
             </div>
-            <div className="min-w-2" />
+            <DecoratedInput
-            <DecoratedInput className={{ container: `w-30 ${authTokenClass}` }} onChange={act.setInputOtpToken} />
+              className={{ container: `ml-2 w-full md:w-30 ${authTokenClass}` }}
+              onChange={act.setInputOtpToken}
+            />
           </div>
         </div>
       </ModalDialogDescription>

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

@@ -46,7 +46,7 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
   }
 
   return (
-    <div className={'flex h-full min-w-60 flex-col overflow-auto border-r border-solid border-border'}>
+    <div className={'flex h-full flex-grow flex-col overflow-auto border-r border-solid border-border'}>
       <div className="flex border-b border-solid border-border">
         <TabButton type={RevisionType.Remote} />
         <TabButton type={RevisionType.Session} />

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

@@ -1,20 +1,12 @@
 import { getPlatformString } from '@/Utils'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { ReactNode } from 'react'
-import styled from 'styled-components'
 
 type Props = {
   children: ReactNode
   onDismiss: () => void
 }
 
-const StyledDialogContent = styled(DialogContent)`
-  width: 90%;
-  max-width: 90%;
-  min-height: 90%;
-  background: var(--modal-background-color);
-`
-
 const HistoryModalDialog = ({ children, onDismiss }: Props) => {
   return (
     <DialogOverlay
@@ -22,9 +14,12 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
       onDismiss={onDismiss}
       aria-label="Note revision history"
     >
-      <StyledDialogContent aria-label="Note revision history" className="rounded-md p-0 shadow-lg">
+      <DialogContent
+        aria-label="Note revision history"
+        className="my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]"
+      >
         <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
-      </StyledDialogContent>
+      </DialogContent>
     </DialogOverlay>
   )
 }

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

@@ -5,6 +5,8 @@ import { RevisionHistoryModalContentProps } from './RevisionHistoryModalProps'
 import HistoryModalFooter from './HistoryModalFooter'
 import HistoryModalContentPane from './HistoryModalContentPane'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+import Icon from '../Icon/Icon'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 const HistoryModalDialogContent = ({
   application,
@@ -16,11 +18,52 @@ const HistoryModalDialogContent = ({
 }: RevisionHistoryModalContentProps) => {
   const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController))
 
+  const [selectedMobileTab, setSelectedMobileTab] = useState<'List' | 'Content'>('Content')
+
   return (
     <>
+      <div className="flex items-center border-b border-border md:hidden">
+        <button
+          className={classNames(
+            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            selectedMobileTab === 'List' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          )}
+          onClick={() => {
+            setSelectedMobileTab('List')
+          }}
+        >
+          List
+        </button>
+        <button
+          className={classNames(
+            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            selectedMobileTab === 'Content' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          )}
+          onClick={() => {
+            setSelectedMobileTab('Content')
+          }}
+        >
+          Content
+        </button>
+        <button className="ml-auto mr-2 rounded-full border border-border p-1.5" onClick={dismissModal}>
+          <Icon type="close" className="h-4 w-4" />
+        </button>
+      </div>
       <div className="flex min-h-0 flex-grow">
-        <HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
+        <div
-        <div className="relative flex flex-grow flex-col">
+          className={classNames(
+            'w-full md:flex md:w-auto md:min-w-60',
+            selectedMobileTab === 'List' ? 'flex' : 'hidden',
+          )}
+        >
+          <HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
+        </div>
+        <div
+          className={classNames(
+            'relative flex-grow flex-col md:flex',
+            selectedMobileTab === 'Content' ? 'flex' : 'hidden',
+          )}
+        >
           <HistoryModalContentPane
             application={application}
             noteHistoryController={noteHistoryController}

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

@@ -41,20 +41,22 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
   }, [deleteRemoteRevision, selectedEntry])
 
   return (
-    <div className="min-h-6 flex flex-shrink-0 items-center justify-between border-t border-solid border-border px-2.5 py-2">
+    <div className="min-h-6 flex flex-shrink-0 flex-wrap items-center gap-2.5 border-t border-solid border-border px-2.5 py-2 md:justify-between">
-      <div>
+      <Button className="py-1.35" label="Close" onClick={dismissModal} />
-        <Button className="py-1.35" label="Close" onClick={dismissModal} />
-      </div>
       {selectedRevision && (
-        <div className="flex items-center">
+        <>
           {(selectedEntry as RevisionListEntry).uuid && (
-            <Button className="mr-2.5" onClick={deleteSelectedRevision}>
+            <Button className="md:ml-auto" onClick={deleteSelectedRevision}>
               {isDeletingRevision ? <Spinner className="my-1 h-3 w-3" /> : 'Delete this revision'}
             </Button>
           )}
-          <Button className="mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} />
+          <Button
+            className={!(selectedEntry as RevisionListEntry).uuid ? 'md:ml-auto' : ''}
+            label="Restore as a copy"
+            onClick={restoreAsCopy}
+          />
           <Button className="" label="Restore version" onClick={restoreSelectedRevision} primary />
-        </div>
+        </>
       )}
     </div>
   )

packages/web/src/javascripts/Components/Shared/ModalDialog.tsx

@@ -12,11 +12,11 @@ const ModalDialog = ({ children, onDismiss, className }: Props) => {
   const ldRef = useRef<HTMLButtonElement>(null)
 
   return (
-    <AlertDialogOverlay leastDestructiveRef={ldRef} onDismiss={onDismiss}>
+    <AlertDialogOverlay className="px-4 md:px-0" leastDestructiveRef={ldRef} onDismiss={onDismiss}>
       <AlertDialogContent
         tabIndex={0}
         className={classNames(
-          'flex w-160 flex-col rounded border border-solid border-border bg-default p-0 shadow-main',
+          'flex w-full flex-col rounded border border-solid border-border bg-default p-0 shadow-main md:w-160',
           className,
         )}
       >

packages/web/src/stylesheets/_modals.scss

@@ -47,6 +47,9 @@
   width: 100%;
   height: 100%;
 
+  padding-left: 1rem;
+  padding-right: 1rem;
+
   background-color: transparent;
   display: flex;
   align-items: center;