fix: Prevent text from hiding behind navbar in Android (#2914)

Author: antsgar

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

@@ -6,11 +6,9 @@ import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 
 export const EditorContentWithSafeAreaPadding = forwardRef(function EditorContentWithSafeAreaPadding(
   {
-    isNoteLocked,
     editorLineWidth,
     children,
   }: {
-    isNoteLocked: boolean
     editorLineWidth: EditorLineWidth
     children: NonNullable<ReactNode>
   },
@@ -24,7 +22,7 @@ export const EditorContentWithSafeAreaPadding = forwardRef(function EditorConten
       className={classNames(
         ElementIds.EditorContent,
         'z-editor-content overflow-auto sm:[&>*]:mx-[var(--editor-margin)] sm:[&>*]:max-w-[var(--editor-max-width)]',
-        hasBottomInset && isNoteLocked && 'pb-safe-bottom',
+        hasBottomInset && 'pb-safe-bottom',
       )}
       style={
         {

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

@@ -955,11 +955,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
           </div>
         )}
 
-        <EditorContentWithSafeAreaPadding
-          isNoteLocked={this.state.noteLocked}
-          editorLineWidth={this.state.editorLineWidth}
-          ref={this.editorContentRef}
-        >
+        <EditorContentWithSafeAreaPadding editorLineWidth={this.state.editorLineWidth} ref={this.editorContentRef}>
           {editorMode === 'component' && this.state.editorComponentViewer && (
             <div className="component-view relative flex-grow">
               {this.state.paneGestureEnabled && <div className="absolute left-0 top-0 h-full w-[20px] md:hidden" />}

packages/web/src/javascripts/Hooks/useSafeAreaPadding.ts

@@ -14,9 +14,9 @@ export const useAvailableSafeAreaPadding = () => {
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false)
   useEffect(() => {
     return application.addNativeMobileEventListener((event) => {
-      if (event === ReactNativeToWebEvent.KeyboardDidShow) {
+      if (event === ReactNativeToWebEvent.KeyboardWillShow) {
         setIsKeyboardVisible(true)
-      } else if (event === ReactNativeToWebEvent.KeyboardDidHide) {
+      } else if (event === ReactNativeToWebEvent.KeyboardWillHide) {
         setIsKeyboardVisible(false)
       }
     })