@ethora/chat-component-rn 26.5.7 → 26.5.11

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -1,7 +1,9 @@
 /** @format */
 
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
+  Animated,
+  Easing,
   Modal,
   Platform,
   StyleSheet,
@@ -20,6 +22,11 @@ interface AttachSheetProps {
   primaryColor?: string;
 }
 
+// Starting translateY for the sheet. Larger than any realistic sheet
+// height so it sits fully below the viewport before opening; the exact
+// number doesn't matter visually because it animates to 0.
+const SHEET_OFFSCREEN = 600;
+
 const AttachSheet: React.FC<AttachSheetProps> = ({
   visible,
   onClose,
@@ -28,9 +35,94 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onDocument,
   primaryColor = '#0052CD',
 }) => {
+  // Pending handler captured on row tap — runs once the EXIT animation
+  // finishes so iOS doesn't try to present an image picker over a
+  // still-dismissing modal (was the original reason for the
+  // platform-split + Modal.onDismiss dance). The animation completion
+  // callback now drives this on both platforms.
+  const pendingRef = useRef<(() => void) | null>(null);
+
+  // Local "modal stays mounted while animating out" state. The parent
+  // controls `visible`; we mirror it but delay unmount until the exit
+  // animation has played so the slide-down is actually seen.
+  const [mounted, setMounted] = useState(visible);
+
+  // Two separate Animated values — the whole point of the rewrite:
+  //   • backdropOpacity: fades the dim layer in/out (no slide).
+  //   • sheetTranslateY: slides ONLY the sheet up from below.
+  // RN Modal's built-in `animationType="slide"` slides the entire
+  // contents (backdrop included) so the dim shade entered from the
+  // bottom — what looked "awful". Splitting these gives the standard
+  // bottom-sheet feel.
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const sheetTranslateY = useRef(
+    new Animated.Value(SHEET_OFFSCREEN)
+  ).current;
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      // Reset to starting positions BEFORE the Modal becomes visible so
+      // the first animated frame is below-the-fold (not a flash of the
+      // settled sheet).
+      backdropOpacity.setValue(0);
+      sheetTranslateY.setValue(SHEET_OFFSCREEN);
+      // requestAnimationFrame lets the Modal commit its mount before the
+      // animation starts; without this the first frame can be skipped.
+      const raf = requestAnimationFrame(() => {
+        Animated.parallel([
+          Animated.timing(backdropOpacity, {
+            toValue: 1,
+            duration: 220,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }),
+          Animated.spring(sheetTranslateY, {
+            toValue: 0,
+            // Tuned for a quick-but-not-bouncy entry. tension is the
+            // "stiffness" knob, friction the "damping" knob in RN's
+            // spring config.
+            tension: 90,
+            friction: 14,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      });
+      return () => cancelAnimationFrame(raf);
+    }
+    if (!mounted) {return;}
+    // Exit: fade the backdrop, slide the sheet down, then unmount and
+    // fire any pending picker handler.
+    Animated.parallel([
+      Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 180,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(sheetTranslateY, {
+        toValue: SHEET_OFFSCREEN,
+        duration: 220,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (!finished) {return;} // interrupted (rapid re-open) → leave state alone
+      setMounted(false);
+      const fn = pendingRef.current;
+      pendingRef.current = null;
+      fn?.();
+    });
+    return undefined;
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const trigger = (handler: () => void) => () => {
+    // Capture the handler and ask parent to close. The exit-animation
+    // completion above fires `handler` AFTER the sheet has slid away,
+    // so iOS no longer tries to present a picker over a dismissing
+    // modal — and Android no longer needs the ad-hoc 150ms setTimeout.
+    pendingRef.current = handler;
     onClose();
-    setTimeout(handler, 150);
   };
 
   const rows: {
@@ -62,51 +154,66 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   return (
     <Modal
       transparent
-      visible={visible}
-      animationType="slide"
+      visible={mounted}
+      // We drive the animation ourselves — disable RN's built-in slide
+      // (which slid the backdrop too) so the fade + spring above are the
+      // only motion.
+      animationType="none"
       onRequestClose={onClose}
+      // Hardware-back / iOS gesture also routes through onClose, which
+      // flips `visible` and triggers our exit animation above.
     >
-      <TouchableOpacity
-        style={styles.backdrop}
-        activeOpacity={1}
-        onPress={onClose}
+      <Animated.View
+        style={[styles.backdrop, { opacity: backdropOpacity }]}
       >
-        <TouchableOpacity activeOpacity={1} style={styles.sheet}>
-          <View style={styles.grabber} />
-          <Text style={styles.title}>Attach</Text>
-          {rows.map(({ label, hint, Icon, handler }, idx) => (
-            <TouchableOpacity
-              key={label}
-              activeOpacity={0.6}
-              style={[
-                styles.row,
-                idx < rows.length - 1 && styles.rowDivider,
-              ]}
-              onPress={trigger(handler)}
-            >
-              <View
+        <TouchableOpacity
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+        <Animated.View
+          style={[
+            styles.sheet,
+            { transform: [{ translateY: sheetTranslateY }] },
+          ]}
+        >
+          <TouchableOpacity activeOpacity={1}>
+            <View style={styles.grabber} />
+            <Text style={styles.title}>Attach</Text>
+            {rows.map(({ label, hint, Icon, handler }, idx) => (
+              <TouchableOpacity
+                key={label}
+                activeOpacity={0.6}
                 style={[
-                  styles.iconBubble,
-                  { backgroundColor: primaryColor + '14' },
+                  styles.row,
+                  idx < rows.length - 1 && styles.rowDivider,
                 ]}
+                onPress={trigger(handler)}
               >
-                <Icon color={primaryColor} width={20} height={20} />
-              </View>
-              <View style={styles.rowText}>
-                <Text style={styles.rowLabel}>{label}</Text>
-                <Text style={styles.rowHint}>{hint}</Text>
-              </View>
+                <View
+                  style={[
+                    styles.iconBubble,
+                    { backgroundColor: primaryColor + '14' },
+                  ]}
+                >
+                  <Icon color={primaryColor} width={20} height={20} />
+                </View>
+                <View style={styles.rowText}>
+                  <Text style={styles.rowLabel}>{label}</Text>
+                  <Text style={styles.rowHint}>{hint}</Text>
+                </View>
+              </TouchableOpacity>
+            ))}
+            <TouchableOpacity
+              activeOpacity={0.6}
+              style={styles.cancelRow}
+              onPress={onClose}
+            >
+              <Text style={styles.cancelLabel}>Cancel</Text>
             </TouchableOpacity>
-          ))}
-          <TouchableOpacity
-            activeOpacity={0.6}
-            style={styles.cancelRow}
-            onPress={onClose}
-          >
-            <Text style={styles.cancelLabel}>Cancel</Text>
           </TouchableOpacity>
-        </TouchableOpacity>
-      </TouchableOpacity>
+        </Animated.View>
+      </Animated.View>
     </Modal>
   );
 };

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -293,11 +293,22 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         <ProfileImagePlaceholder
           name={activeRoom.title || activeRoom.name}
           icon={activeRoom.icon}
+          // Two gates control whether the icon is editable:
+          //   1. role — only non-participants could edit before.
+          //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from
+          //      config so a consumer can make the icon read-only for
+          //      everyone (e.g. branded rooms, patient-facing apps).
+          // Both must allow it for the picker/remove affordances to show.
           upload={{
             onUpload,
-            active: activeRoom?.role !== 'participant' ? true : false,
+            active:
+              !config?.disableChatInfo?.disableIconEdit &&
+              activeRoom?.role !== 'participant',
+          }}
+          remove={{
+            enabled: !config?.disableChatInfo?.disableIconEdit,
+            onRemoveClick,
           }}
-          remove={{ enabled: true, onRemoveClick }}
           role={activeRoom?.role}
           size={128}
         />
@@ -377,7 +388,18 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                   >
                     <Pressable
                       style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 16 }}
-                      onPress={() => handleUserAvatarClick(user)}
+                      // `disableChatInfo.disableMemberTap` blocks the
+                      // tap entirely so the user-profile popup never
+                      // opens. `disableMemberProfileActions` only hid
+                      // the action buttons INSIDE that popup, leaving
+                      // the popup itself to open on tap — this gate
+                      // closes the door. Customer-reported #16.
+                      onPress={
+                        config?.disableChatInfo?.disableMemberTap
+                          ? undefined
+                          : () => handleUserAvatarClick(user)
+                      }
+                      disabled={!!config?.disableChatInfo?.disableMemberTap}
                     >
                       <ProfileImagePlaceholder
                         name={`${user.firstName} ${user.lastName}`}

package/src/components/Modals/FilePreviewModal/DocumentViewer.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+interface DocumentViewerProps {
+  /** Public CDN URL of the doc. Must be reachable from Google's servers. */
+  url: string;
+  /** Optional display filename; used for the error fallback only. */
+  fileName?: string;
+}
+
+/**
+ * Inline preview for office documents (DOC / DOCX / XLS / XLSX / PPT /
+ * PPTX / TXT / RTF / CSV) and other non-PDF formats supported by
+ * Google's free gview rendering service.
+ *
+ * Strategy: embed `https://docs.google.com/gview?url=<encoded>&embedded=true`
+ * inside a WebView. Google fetches the doc from its public URL and
+ * renders it to a viewable iframe — no client-side dependency on
+ * native office libraries, no extra peer dep. Works for any backend
+ * whose file URLs are publicly reachable (which Ethora's `/files/`
+ * already are — they're CDN URLs returned in `item.location`).
+ *
+ * Limitations (documented for the integrator):
+ *   - Requires public URL — won't work for auth-gated downloads.
+ *   - First load can take 2-5s on slow networks.
+ *   - Read-only — no editing, no print/share buttons.
+ *
+ * For PDFs use the existing PdfViewer (downloads then renders locally).
+ */
+const DocumentViewer: React.FC<DocumentViewerProps> = ({ url, fileName }) => {
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+
+  const viewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(
+    url
+  )}&embedded=true`;
+
+  if (errored) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorTitle}>
+          {fileName || 'Document'}
+        </Text>
+        <Text style={styles.errorBody}>
+          Couldn't render an inline preview. Tap the save icon above to
+          download the file.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        source={{ uri: viewerUrl }}
+        style={styles.webview}
+        originWhitelist={['*']}
+        startInLoadingState
+        onLoadEnd={() => setLoaded(true)}
+        onError={() => setErrored(true)}
+        onHttpError={() => setErrored(true)}
+      />
+      {!loaded && (
+        <View style={styles.loadingOverlay} pointerEvents="none">
+          <ActivityIndicator size="large" />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default DocumentViewer;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, width: '100%', backgroundColor: '#fff' },
+  webview: { flex: 1, backgroundColor: '#fff' },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 8,
+  },
+  errorTitle: { fontSize: 16, fontWeight: '600' },
+  errorBody: { color: '#666', textAlign: 'center' },
+});

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components/native';
 import {
   CenterContainer,
@@ -11,19 +11,94 @@ import Button from '../../styled/Button';
 import { RootState } from '../../../roomStore';
 import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
 import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
-import { Alert, Text, View, Platform } from 'react-native';
-import { Video, ResizeMode } from 'expo-av';
+import {
+  Alert,
+  Text,
+  View,
+  Platform,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
+import { PlayIcon } from '../../../assets/icons';
 import * as FileSystem from 'expo-file-system/legacy';
 import * as MediaLibrary from 'expo-media-library';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
-import { ensureFilenameHasExtension } from '../../../helpers/mimeToExtension';
+import DocumentViewer from './DocumentViewer';
+import AudioMessage from '../../styled/AudioMessage';
+import { ensureFilenameHasExtension, isLikelyAudio } from '../../../helpers/mimeToExtension';
+
+// MIME types Google's gview embed renders reliably. Everything else
+// falls through to the info-card so the user can still download.
+const GVIEW_PREVIEWABLE = new Set<string>([
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'text/plain',
+  'text/csv',
+  'application/rtf',
+]);
+const isGviewPreviewable = (mime: string | undefined | null) => {
+  if (!mime) {return false;}
+  return GVIEW_PREVIEWABLE.has(mime.toLowerCase().split(';')[0]!.trim());
+};
+
+// Full-screen video preview on expo-video (expo-av <Video> is deprecated
+// and rendered blank on Android). `contentFit: contain` fits the clip to
+// the area with the surrounding letterbox painted as the view's own
+// (transparent → theme) background, NOT black. `textureView` so the play
+// overlay composites on top and nothing is clipped on Android.
+const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
+  const [showPlay, setShowPlay] = useState(true);
 
-export const FullScreenVideo = styled.View`
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-`;
+  const player = useVideoPlayer(uri, (p) => {
+    p.muted = false;
+  });
+
+  useEffect(() => {
+    const sub = player.addListener('playingChange', ({ isPlaying }) => {
+      if (isPlaying) {setShowPlay(false);}
+    });
+    return () => sub.remove();
+  }, [player]);
+
+  const handlePlay = () => {
+    setShowPlay(false);
+    player.play();
+  };
+
+  return (
+    <View style={{ flex: 1, width: '100%' }}>
+      <VideoView
+        player={player}
+        style={{ flex: 1, backgroundColor: 'transparent' }}
+        contentFit="contain"
+        nativeControls
+        surfaceType="textureView"
+        allowsFullscreen
+      />
+      {/* Play affordance shown immediately on open; tapping starts
+          playback and the native controls take over. */}
+      {showPlay && (
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={handlePlay}
+          style={StyleSheet.absoluteFillObject}
+        >
+          <View style={styles.playOverlay}>
+            <View style={styles.playButton}>
+              <PlayIcon width={28} height={28} />
+            </View>
+          </View>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 interface FilePreviewModalProps {
   handleCloseModal: any;
@@ -39,7 +114,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     (state: RootState) => state.chatSettingStore
   );
 
-  if (!activeFile) {return;}
+  if (!activeFile) {return null;}
 
   const requestStoragePermission = async () => {
     try {
@@ -143,30 +218,55 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     handleCloseModal?.();
   };
 
-  const getMediaComponent = useMemo(() => {
+  // NOTE: plain computed value, NOT useMemo. It sits AFTER the
+  // `if (!activeFile) return` guard above, so as a hook it would run
+  // conditionally (skipped when activeFile is null) — changing the hook
+  // count between renders and throwing "rendered more hooks than during
+  // the previous render", which crashed the modal the instant you tapped
+  // a video/image to open it. Recomputing this on each render is cheap.
+  const getMediaComponent: React.ReactNode = (() => {
     switch (true) {
       case activeFile.mimetype.startsWith('image/'):
         return (
           <FullScreenImage
-            src={
-              activeFile.fileURL ||
-              'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
-            }
-            alt={activeFile.fileName}
+            source={{
+              uri:
+                activeFile.fileURL ||
+                'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg',
+            }}
+            resizeMode="contain"
+            accessibilityLabel={activeFile.fileName}
           />
         );
       case activeFile.mimetype.startsWith('video/'):
+        return <ModalVideo uri={activeFile.fileURL} />;
+      // Mirrors the MediaMessage heuristic: treat octet-stream voicemails
+      // with audio-shaped filenames / URLs as audio so the preview shows
+      // the player instead of an "Unsupported" card. Customer-reported
+      // #9 voicemail fix — see isLikelyAudio in mimeToExtension.ts.
+      case isLikelyAudio(
+        activeFile.mimetype,
+        activeFile.fileName,
+        activeFile.fileURL
+      ):
         return (
-          <Video
+          <View
             style={{
               width: '100%',
-              height: '100%',
+              padding: 20,
+              gap: 12,
+              backgroundColor: '#FFF8ED',
+              borderRadius: 16,
             }}
-            source={{ uri: activeFile.fileURL }}
-            useNativeControls
-            resizeMode={ResizeMode.CONTAIN}
-            shouldPlay={false}
-          />
+          >
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              {ensureFilenameHasExtension(
+                activeFile.fileName,
+                activeFile.mimetype
+              )}
+            </Text>
+            <AudioMessage src={activeFile.fileURL} />
+          </View>
         );
       case activeFile.mimetype === 'application/pdf':
         return <PdfViewer pdfUrl={activeFile.fileURL} />;
@@ -175,6 +275,20 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           activeFile.fileName,
           activeFile.mimetype
         );
+        // Office docs (.docx / .xlsx / .pptx / .doc / .xls / .ppt /
+        // .txt / .csv / .rtf) → render inline via Google's gview embed
+        // — fixes the "blank preview" complaint for docs (bug #9).
+        if (isGviewPreviewable(activeFile.mimetype)) {
+          return (
+            <DocumentViewer
+              url={activeFile.fileURL}
+              fileName={displayName}
+            />
+          );
+        }
+        // True last-resort fallback for genuinely unrenderable types
+        // (binary blobs, exotic MIMEs). Friendly info card with the
+        // filename so the user can still download.
         return (
           <View
             style={{
@@ -198,7 +312,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       }
     }
-  }, [activeFile]);
+  })();
 
   return (
     <ModalContainerFullScreen>
@@ -217,10 +331,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       <CenterContainer
         style={{
           display: 'flex',
-          height: '100%',
+          flex: 1,
           justifyContent: 'center',
-          overflow: 'hidden',
+          // NOTE: do NOT set overflow:'hidden' here — on Android it clips
+          // hardware-accelerated children (expo-av Video TextureView and
+          // react-native-webview) to nothing, so video/PDF/doc previews
+          // render blank while plain <Image> survives.
+          overflow: 'visible',
           padding: 16,
+          paddingBottom: 48,
         }}
       >
         {getMediaComponent}
@@ -230,4 +349,20 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  playOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
 export default FilePreviewModal;

package/src/components/Modals/FilePreviewModal/PdfView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import * as FileSystem from 'expo-file-system/legacy';
 
@@ -10,13 +10,20 @@ interface PdfViewerProps {
 const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
   const [localUri, setLocalUri] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // Android's WebView has NO native PDF renderer, so a file:// (or direct)
+  // PDF loads blank. Route it through Google's gview embed using the
+  // (public) remote URL — same approach as DocumentViewer for office docs.
+  // iOS WKWebView renders PDFs natively, so we download + show the file.
+  const isAndroid = Platform.OS === 'android';
 
   useEffect(() => {
+    if (isAndroid) {
+      return;
+    }
     let cancelled = false;
     const run = async () => {
       try {
-        const target =
-          FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
+        const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
         const result = await FileSystem.downloadAsync(pdfUrl, target);
         if (cancelled) {return;}
         setLocalUri(result.uri);
@@ -30,7 +37,28 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     return () => {
       cancelled = true;
     };
-  }, [pdfUrl]);
+  }, [pdfUrl, isAndroid]);
+
+  if (isAndroid) {
+    const gviewUrl = `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(
+      pdfUrl
+    )}`;
+    return (
+      <View style={styles.container}>
+        <WebView
+          source={{ uri: gviewUrl }}
+          style={styles.webview}
+          originWhitelist={['*']}
+          startInLoadingState
+          renderLoading={() => (
+            <View style={styles.center}>
+              <ActivityIndicator size="large" />
+            </View>
+          )}
+        />
+      </View>
+    );
+  }
 
   if (error) {
     return (

package/src/components/Modals/Modal/Modal.tsx

@@ -39,7 +39,10 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
   };
   return (
     modal && (
-      <ModalBackground id="modal-background" style={{ position: 'absolute' }}>
+      <ModalBackground
+        id="modal-background"
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+      >
         {renderModalContent()}
         {children}
       </ModalBackground>