refactor: migrate edit to custom component

apps/client/src/common/components/buttons/Button.module.scss

@@ -3,6 +3,7 @@
 .baseButton {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0.5em;
 
   width: fit-content;

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -9,6 +9,11 @@
   border-radius: 3px;
 
   cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 }
 
 .subtle {

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -38,6 +38,7 @@
 
   background-color: $gray-1250;
   color: $ui-white;
+  border-left: 1px solid $gray-1200;
 
   &[data-open] {
     transform: translateX(0%);

apps/client/src/features/operator/edit-modal/EditModal.module.scss

@@ -1,27 +1,53 @@
 .editModal {
-  position: absolute;
-  z-index: 2;
-  margin: 0 auto;
-  top: 20%;
+  position: fixed;
+  top: 10%;
   left: 50%;
+
+  z-index: 2;
   transform: translateX(-50%);
 
-  padding: 1rem;
+  padding-inline: 1rem;
+  min-width: min(720px, 90vw);
+  
   background-color: $gray-1250;
+  color: $ui-white;
+  border-radius: 3px;
+  box-shadow: $box-shadow-l1;
+  border: 1px solid $gray-1200;
+}
+
+.title {
+  font-size: 1.25rem;
+  padding-block: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
+
+  max-height: min(80vh, 600px);
+  overflow-y: auto;
+}
+
+.label {
+  background-color: var(--user-bg);
+  width: fit-content;
+  padding-inline: 1rem;
+}
+
+.footer {
+  padding-block: 1rem;
+  display: flex;
+  align-items: center;
   gap: 1rem;
-  min-width: min(400px, 90vw);
-  box-shadow: $box-shadow-l1;
 
-  .buttonRow {
-    margin-top: auto;
-    display: flex;
-    justify-content: space-between; 
-    gap: 1rem;
-
-    button {
-     width: 100%;
-    }
+  button {
+   width: 100%;
   }
 }

apps/client/src/features/operator/edit-modal/EditModal.tsx

@@ -1,9 +1,13 @@
-import { useRef, useState } from 'react';
-import { Button, Textarea } from '@chakra-ui/react';
+import { Fragment, useRef, useState } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { Textarea } from '@chakra-ui/react';
 import { OntimeEvent } from 'ontime-types';
 
+import Button from '../../../common/components/buttons/Button';
+import IconButton from '../../../common/components/buttons/IconButton';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
-import type { EditEvent } from '../Operator';
+import { EditEvent } from '../operator.types';
 
 import style from './EditModal.module.scss';
 
@@ -44,34 +48,55 @@ export default function EditModal(props: EditModalProps) {
   };
 
   return (
-    <div className={style.editModal}>
-      <div>{`Editing fields in cue ${event.cue}`}</div>
-      {event.subscriptions.map((field) => {
-        return (
-          <div key={field.label}>
-            <label>{field.label}</label>
-            <Textarea
-              ref={(element) => {
-                if (element) inputRef.current.push(element);
-              }}
-              variant='ontime-filled'
-              placeholder={`Add value for ${field.label} field`}
-              defaultValue={field.value}
-              data-field={field.id}
-              isDisabled={loading}
-              resize='none'
-            />
+    <Dialog.Root
+      open
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Popup className={style.editModal}>
+          <div className={style.title}>
+            {`Editing fields in cue ${event.cue}`}
+            <IconButton variant='subtle-white' onClick={onClose} disabled={loading}>
+              <IoClose />
+            </IconButton>
           </div>
-        );
-      })}
-      <div className={style.buttonRow}>
-        <Button variant='ontime-subtle' onClick={onClose} isDisabled={loading}>
-          Cancel
-        </Button>
-        <Button variant='ontime-filled' onClick={handleSave} isDisabled={loading}>
-          Save
-        </Button>
-      </div>
-    </div>
+          <div className={style.body}>
+            {event.subscriptions.map((field) => {
+              return (
+                <Fragment key={field.id}>
+                  <label htmlFor={field.id} className={style.label} style={{ '--user-bg': field.colour }}>
+                    {field.label}
+                  </label>
+                  <Textarea
+                    name={field.id}
+                    ref={(element) => {
+                      if (element) inputRef.current.push(element);
+                    }}
+                    variant='ontime-filled'
+                    placeholder={`Add value for ${field.label} field`}
+                    defaultValue={field.value}
+                    data-field={field.id}
+                    isDisabled={loading}
+                    resize='none'
+                    rows={5}
+                  />
+                </Fragment>
+              );
+            })}
+          </div>
+
+          <div className={style.footer}>
+            <Button variant='subtle' size='large' onClick={onClose} disabled={loading}>
+              Cancel
+            </Button>
+            <Button variant='primary' size='large' onClick={handleSave} disabled={loading}>
+              Save
+            </Button>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }