fix: spdv-914 - Modals are partially cut off in File Manager on Windows (Chrome) (#219)

* fix: spdv-914

* refactor: spdv-914-fix

* refactor: spdv-914-fix

src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.tsx

@@ -1,17 +1,15 @@
 import { PostageBatch } from '@ethersphere/bee-js'
-import { Warning } from '@mui/icons-material'
 import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
 import { ReactElement, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import AlertIcon from 'remixicon-react/AlertLineIcon'
-import CalendarIcon from 'remixicon-react/CalendarLineIcon'
-import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
 
-import { calculateStampCapacityMetrics } from '../../utils/bee'
 import { getDaysLeft } from '../../utils/common'
 import { Button } from '../Button/Button'
 import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
 
+import { ExpiringNotificationModalItem } from './ExpiringNotificationModalItem/ExpiringNotificationModalItem'
+
 import './ExpiringNotificationModal.scss'
 import '../../styles/global.scss'
 
@@ -67,62 +65,24 @@ export function ExpiringNotificationModal({
           <AlertIcon size="21px" /> Drives Expiring soon
         </div>
         <div>The following drives will expire soon. Extend them to keep your data accessible.</div>
-
-        <div className="fm-modal-window-body fm-expiring-notification-modal-body">
-          {paginatedStamps.map((stamp, index) => {
-            const daysLeft = getDaysLeft(stamp.duration.toEndDate())
-            let daysClass = ''
-
-            const drive = drives.find(d => d.batchId.toString() === stamp.batchID.toString())
-
-            if (!drive) return null
-
-            const filesPerDrive = files.filter(fi => fi.driveId === drive.id.toString())
-
-            const { usedSize, stampSize } = calculateStampCapacityMetrics(stamp, filesPerDrive, drive.redundancyLevel)
-
-            if (daysLeft < 10) {
-              daysClass = 'fm-red-font'
-            } else if (daysLeft < 30) {
-              daysClass = 'fm-swarm-orange-font'
-            }
-
-            return (
-              <div
+        <div className="fm-modal-window-scrollable">
+          <div className="fm-modal-window-body fm-expiring-notification-modal-body">
+            {paginatedStamps.map((stamp, index) => (
+              <ExpiringNotificationModalItem
                 key={`${stamp.batchID.toString()}-${currentPage}-${index}`}
-                className="fm-modal-white-section fm-space-between"
-              >
-                <div className="fm-expiring-notification-modal-section-left fm-space-between">
-                  <DriveIcon size="20" color="rgb(237, 129, 49)" />
-                  <div>
-                    <div className="fm-expiring-notification-modal-section-left-header fm-emphasized-text">
-                      {stamp.label} {drive.isAdmin && <Warning style={{ fontSize: '16px' }} />}
-                    </div>
-                    <div className="fm-expiring-notification-modal-section-left-value">
-                      {usedSize} / {stampSize}
-                    </div>
-                  </div>
-                </div>
-                <div className="fm-expiring-notification-modal-section-right">
-                  <div className="fm-expiring-notification-modal-section-right-header">
-                    <CalendarIcon size="14" /> Expiry date: {stamp.duration.toEndDate().toLocaleDateString()}
-                  </div>
-                  <div className={daysClass}>{daysLeft} days left</div>
-                  <div className="fm-expiring-notification-modal-section-right-button">
-                    <Button
-                      label="Upgrade"
-                      variant="primary"
-                      onClick={() => {
-                        setActualStamp(stamp)
-                        setActualDrive(drive)
-                        setShowUpgradeDriveModal(true)
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-            )
-          })}
+                stamp={stamp}
+                drives={drives}
+                files={files}
+                currentPage={currentPage}
+                index={index}
+                onUpgradeClick={(stamp, drive) => {
+                  setActualStamp(stamp)
+                  setActualDrive(drive)
+                  setShowUpgradeDriveModal(true)
+                }}
+              />
+            ))}
+          </div>
         </div>
         <div className="fm-modal-window-footer">
           <div className="fm-expiring-notification-modal-footer-one-button">

src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModalItem/ExpiringNotificationModalItem.tsx

@@ -0,0 +1,75 @@
+import { PostageBatch } from '@ethersphere/bee-js'
+import { Warning } from '@mui/icons-material'
+import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement } from 'react'
+import CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
+
+import { calculateStampCapacityMetrics } from '../../../utils/bee'
+import { getDaysLeft } from '../../../utils/common'
+import { Button } from '../../Button/Button'
+
+import '../../../styles/global.scss'
+
+interface ExpiringNotificationModalItemProps {
+  stamp: PostageBatch
+  drives: DriveInfo[]
+  files: FileInfo[]
+  currentPage: number
+  index: number
+  onUpgradeClick: (stamp: PostageBatch, drive: DriveInfo) => void
+}
+
+export function ExpiringNotificationModalItem({
+  stamp,
+  drives,
+  files,
+  currentPage,
+  index,
+  onUpgradeClick,
+}: ExpiringNotificationModalItemProps): ReactElement | null {
+  const daysLeft = getDaysLeft(stamp.duration.toEndDate())
+  let daysClass = ''
+
+  const drive = drives.find(d => d.batchId.toString() === stamp.batchID.toString())
+
+  if (!drive) return null
+
+  const filesPerDrive = files.filter(fi => fi.driveId === drive.id.toString())
+
+  const { usedSize, stampSize } = calculateStampCapacityMetrics(stamp, filesPerDrive, drive.redundancyLevel)
+
+  if (daysLeft < 10) {
+    daysClass = 'fm-red-font'
+  } else if (daysLeft < 30) {
+    daysClass = 'fm-swarm-orange-font'
+  }
+
+  return (
+    <div
+      key={`${stamp.batchID.toString()}-${currentPage}-${index}`}
+      className="fm-modal-white-section fm-space-between"
+    >
+      <div className="fm-expiring-notification-modal-section-left fm-space-between">
+        <DriveIcon size="20" color="rgb(237, 129, 49)" />
+        <div>
+          <div className="fm-expiring-notification-modal-section-left-header fm-emphasized-text">
+            {stamp.label} {drive.isAdmin && <Warning style={{ fontSize: '16px' }} />}
+          </div>
+          <div className="fm-expiring-notification-modal-section-left-value">
+            {usedSize} / {stampSize}
+          </div>
+        </div>
+      </div>
+      <div className="fm-expiring-notification-modal-section-right">
+        <div className="fm-expiring-notification-modal-section-right-header">
+          <CalendarIcon size="14" /> Expiry date: {stamp.duration.toEndDate().toLocaleDateString()}
+        </div>
+        <div className={daysClass}>{daysLeft} days left</div>
+        <div className="fm-expiring-notification-modal-section-right-button">
+          <Button label="Upgrade" variant="primary" onClick={() => onUpgradeClick(stamp, drive)} />
+        </div>
+      </div>
+    </div>
+  )
+}