From a9cd34400f1186477fbe926c146a79aad13269fd Mon Sep 17 00:00:00 2001
From: Frank Waalkens <f.waalkens@tfe.nl>
Date: Mon, 23 Oct 2023 16:10:00 +0200
Subject: [PATCH] Inset is unsupported on devices.

---
 src/app/Marine2/components/ui/Modal/Modal.tsx | 25 ++++++++-----------
 src/app/Marine2/types/generic/modal.ts        |  1 +
 2 files changed, 12 insertions(+), 14 deletions(-)
 create mode 100644 src/app/Marine2/types/generic/modal.ts

diff --git a/src/app/Marine2/components/ui/Modal/Modal.tsx b/src/app/Marine2/components/ui/Modal/Modal.tsx
index 6d94731bd..1740ee878 100644
--- a/src/app/Marine2/components/ui/Modal/Modal.tsx
+++ b/src/app/Marine2/components/ui/Modal/Modal.tsx
@@ -1,5 +1,6 @@
-import classnames from "classnames"
+import classNames from "classnames"
 import type { FC, ReactNode } from "react"
+import { ModalVariant } from "@m2Types/generic/modal"
 
 interface Props {
   open?: boolean
@@ -9,13 +10,13 @@ interface Props {
 }
 
 const Frame: FC<Props> = ({ children, open = true, onClose, className }) => {
-  const classes = classnames(
-    "fixed inset-0 z-10 p-4 md:p-8 text-neutral-600 modal dark:text-white items-center justify-center",
+  const classes = classNames(
+    "fixed inset-x-0 inset-y-0 z-10 p-4 md:p-8 text-neutral-600 modal dark:text-white items-center justify-center",
     `${open ? "flex" : "hidden"}` // control visibility via `open` attribute (or render conditionally)
   )
   return (
     <div className={classes} onClick={onClose}>
-      <div className={classnames("absolute", className)} onClick={(e) => e.stopPropagation()}>
+      <div className={classNames("absolute", className)} onClick={(e) => e.stopPropagation()}>
         <div className="overflow-hidden bg-victron-gray-900 dark:bg-victron-darkGray rounded-md shadow-[0_8px_24px_-15px_rgba(0,0,0,0.75)]">
           {children}
         </div>
@@ -24,29 +25,25 @@ const Frame: FC<Props> = ({ children, open = true, onClose, className }) => {
   )
 }
 
-const Head: FC<{ children: ReactNode; className?: string }> = ({ children, className }) => (
-  <div className={classnames("block p-4", className)}>{children}</div>
-)
-
 interface BodyProps {
   children: ReactNode
   className?: string
   variant?: ModalVariant
 }
 
-type ModalVariant = "default" | "popUp"
-
 const Body: FC<BodyProps> = ({ children, className, variant = "default" }) => {
-  const classes = classnames("dark:text-white", {
-    className: className,
+  const classes = classNames("dark:text-white", {
     "px-4 md:px-10 lg:px-16 pt-6 pb-6 md:pb-10": variant === "default",
     "p-4": variant === "popUp",
+    className: className,
   })
   return <div className={classes}>{children}</div>
 }
 
 const Footer: FC = ({ children }) => (
-  <div className="flex justify-between border-t border-victron-darkGray-200 text-base">{children}</div>
+  <div className="flex justify-between border-t border-victron-darkGray-200 text-base">
+    {children}
+  </div>
 )
 
-export const Modal = { Frame, Head, Body, Footer }
+export const Modal = { Frame, Body, Footer }
diff --git a/src/app/Marine2/types/generic/modal.ts b/src/app/Marine2/types/generic/modal.ts
new file mode 100644
index 000000000..693cf2e23
--- /dev/null
+++ b/src/app/Marine2/types/generic/modal.ts
@@ -0,0 +1 @@
+export type ModalVariant = "default" | "popUp"