fix: protected overlay on mobile (#1621)

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

@@ -28,16 +28,12 @@ const FileView = ({ application, viewControllerManager, file }: FileViewProps) =
   }, [application, file])
 
   return shouldShowProtectedOverlay ? (
-    <div aria-label="Note" className="section editor sn-component">
-      <div className="flex h-full items-center justify-center">
     <ProtectedItemOverlay
       viewControllerManager={viewControllerManager}
       hasProtectionSources={application.hasProtectionSources()}
       onViewItem={dismissProtectedOverlay}
-          itemType={'note'}
+      itemType={'file'}
     />
-      </div>
-    </div>
   ) : (
     <FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />
   )

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

@@ -874,18 +874,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
   override render() {
     if (this.state.showProtectedWarning) {
       return (
-        <div aria-label="Note" className="section editor sn-component">
-          {this.state.showProtectedWarning && (
-            <div className="flex h-full items-center justify-center">
         <ProtectedItemOverlay
           viewControllerManager={this.viewControllerManager}
           hasProtectionSources={this.application.hasProtectionSources()}
           onViewItem={this.dismissProtectedWarning}
           itemType={'note'}
         />
-            </div>
-          )}
-        </div>
       )
     }
 

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

@@ -1,5 +1,6 @@
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import Button from '@/Components/Button/Button'
+import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -14,7 +15,12 @@ const ProtectedItemOverlay = ({ viewControllerManager, onViewItem, hasProtection
     : `Add a passcode or create an account to require authentication to view this ${itemType}.`
 
   return (
-    <div className="flex max-w-md flex-col items-center justify-center text-center">
+    <div aria-label="Protected overlay" className="section editor sn-component">
+      <div className="flex h-full flex-grow flex-col justify-center md:flex-row md:items-center">
+        <div className="mb-auto p-4 md:hidden">
+          <MobileItemsListButton />
+        </div>
+        <div className="mb-auto flex max-w-md flex-col items-center justify-center text-center md:mb-0">
           <h1 className="m-0 w-full text-2xl font-bold">This {itemType} is protected</h1>
           <p className="mt-2 w-full text-lg">{instructionText}</p>
           <div className="mt-4 flex gap-3">
@@ -34,6 +40,8 @@ const ProtectedItemOverlay = ({ viewControllerManager, onViewItem, hasProtection
             </Button>
           </div>
         </div>
+      </div>
+    </div>
   )
 }