fix: Adjust modal height in window view to occupy entire screen height

Author: reshmarevi17

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.0.1] - 2024-03-26
+## [1.0.0] - 2024-03-26
 
 ### Added
 

src/components/SirenInbox.tsx

@@ -144,10 +144,26 @@ const SirenInbox: FC<SirenProps> = ({
     setIsModalOpen((prevState: boolean) => !prevState);
   };
 
+  const modalStyle = useMemo(() => {
+    if (windowViewOnly) 
+      return {
+        width: "100%",
+        height: "100%",
+      };
+    else 
+      return {
+        ...styles.windowShadow,
+        ...modalPosition,
+        width: updatedModalWidth,
+      };
+    
+  }, [windowViewOnly, updatedModalWidth, styles.windowShadow]);
+  
+
   return (
     <div
       ref={modalRef}
-      className={`${!windowViewOnly && "siren-sdk-inbox-container"}`}
+      className={`${!windowViewOnly ? "siren-sdk-inbox-container" : "siren-sdk-inbox-window-container"}`}
     >
       {!windowViewOnly && (
         <div ref={iconRef}>
@@ -165,11 +181,9 @@ const SirenInbox: FC<SirenProps> = ({
       {(isModalOpen || windowViewOnly) && (
         <div
           style={{
-            ...styles.container,
-            ...(!windowViewOnly && styles.windowShadow),
             position: windowViewOnly ? "initial" : "absolute",
-            width: windowViewOnly ? "100%" : updatedModalWidth,
-            ...modalPosition,
+            ...styles.container,
+            ...modalStyle,
           }}
           data-testid="siren-panel"
         >

src/components/SirenPanel.tsx

@@ -20,6 +20,7 @@ import type { SirenPanelProps } from "../types";
 import {
   filterDataProperty,
   generateFilterParams,
+  getModalContentHeightInFullScreen,
   isEmptyArray,
   isValidResponse,
   mergeArrays,
@@ -437,6 +438,10 @@ const SirenPanel: FC<SirenPanelProps> = ({
     };
   }, [fullScreen, styles, modalWidth]);
 
+  const contentContainerHeightInFullScreen = useMemo(() => {
+    return getModalContentHeightInFullScreen(styles?.headerContainer?.height);
+  }, [styles?.headerContainer?.height]);
+
   return (
     <div
       className={
@@ -445,7 +450,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
       style={panelStyle}
       data-testid="siren-panel"
     >
-      <div>
+      <div className={fullScreen ? 'siren-sdk-panel-modal-fullscreen' : ''}>
         {!hideHeader &&
           (customHeader || (
             <Header
@@ -460,16 +465,19 @@ const SirenPanel: FC<SirenPanelProps> = ({
         <div
           style={{
             ...(!fullScreen && styles.windowBottomBorder),
+            ...(fullScreen && {height: contentContainerHeightInFullScreen}),
             ...styles.contentContainer,
           }}
         >
           <div
             id="contentContainer"
             style={{
-              ...(!fullScreen && styles.windowBottomBorder),
-              ...styles.body,
+              ...(fullScreen ? { height: contentContainerHeightInFullScreen } : {
+                ...styles.windowBottomBorder,
+                ...styles.body
+              }),
             }}
-            className={containerClassNames}
+            className={`siren-sdk-panel-content-container ${containerClassNames}`}
             aria-label="siren-notification-list"
           >
             {renderList()}

src/styles/sirenInbox.css

@@ -2,4 +2,7 @@
 .siren-sdk-inbox-container {
     width: fit-content;
     position: relative;
+}
+.siren-sdk-inbox-window-container {
+    height: 100%;
 }

src/styles/sirenPanel.css

@@ -1,6 +1,9 @@
 .siren-sdk-list-loader-container{
     width: 100%;
 }
+.siren-sdk-panel-modal-fullscreen {
+    height: 100%;
+}
 .siren-sdk-panel-modal {
     position:absolute;
     box-shadow: rgb(0 0 0 / 30%) 0px 8px 24px;
@@ -12,8 +15,12 @@
     margin: 10px;
 
 }
+.siren-sdk-panel-content-container {
+    overflow: auto;
+}
 .siren-sdk-panel-container {
     width: 100% !important;
+    height: 100%;;
     border-radius: 20px;
     background-color: #FFFFFF;
     display: flex;

src/utils/commonUtils.ts

@@ -157,7 +157,6 @@ export const applyTheme = (
       }`,
     },
     body: {
-      overflow: "auto",
       height: customStyle.windowContainer?.contentHeight || "700px",
     },
     headerContainer: {
@@ -442,3 +441,13 @@ export const debounce = <F extends (...args: unknown[]) => void>(
     }, delay);
   };
 };
+
+export const getModalContentHeightInFullScreen = (headerHeight: DimensionValue | undefined) =>  {
+  let updatedHeight = 0;
+
+  if (typeof headerHeight === "string")
+    updatedHeight = parseInt(headerHeight.slice(0, -2));
+  else if (typeof headerHeight === "number") updatedHeight = headerHeight;
+
+  return `calc(100% - ${updatedHeight}px)`
+}

tests/components/__snapshots__/sirenPanel.spec.tsx.snap

@@ -7,7 +7,9 @@ exports[`matches snapshot 1`] = `
     data-testid="siren-panel"
     style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 500px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; max-width: 100;"
   >
-    <div>
+    <div
+      class=""
+    >
       <div
         class="siren-sdk-header-container"
         data-testid="header"
@@ -51,9 +53,9 @@ exports[`matches snapshot 1`] = `
       >
         <div
           aria-label="siren-notification-list"
-          class="false "
+          class="siren-sdk-panel-content-container false "
           id="contentContainer"
-          style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: auto; height: 700px;"
+          style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 700px;"
         >
           <div
             class="siren-sdk-list-loader-container"