[Fix] Dialog fixed position breaking the view (#1186)

* [FIx] Dialog fixed position breaking the view

* feat(dialog): add compatibility warning styling and className prop

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>
Co-authored-by: Brett <27568879+BrettCleary@users.noreply.github.com>

Author: flavioislima

src/frontend/components/UI/Dialog/index.css

@@ -1,7 +1,4 @@
 .Dialog__element {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
@@ -22,6 +19,12 @@
   --dialog-gap: 24px;
 }
 
+.compatibility-warning {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .Dialog__element[open] {
   opacity: 1;
   box-shadow: 0px 0px 0px 100vmax var(--modal-backdrop);

src/frontend/components/UI/DialogHandler/components/MessageBoxModal/index.tsx

@@ -21,6 +21,7 @@ interface MessageBoxModalProps {
   checkboxLabel?: string
   checkboxValue?: boolean
   isModal?: boolean
+  className?: string
 }
 
 const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
@@ -71,7 +72,10 @@ const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
     <Dialog
       onClose={props.onClose}
       showCloseButton
-      className={classNames({ errorDialog: props.type === 'ERROR' })}
+      className={classNames(
+        { errorDialog: props.type === 'ERROR' },
+        props.className
+      )}
       isModal={props.isModal}
     >
       <DialogHeader onClose={props.onClose}>{props.title}</DialogHeader>

src/frontend/components/UI/DialogHandler/index.tsx

@@ -44,6 +44,7 @@ export default function DialogHandler() {
           buttons={dialogModalOptions.buttons ? dialogModalOptions.buttons : []}
           isModal={dialogModalOptions.isModal}
           onClose={() => handleClose()}
+          className={dialogModalOptions.className}
         />
       )}
     </>

src/frontend/helpers/library.ts

@@ -170,6 +170,7 @@ const launch = async ({
         'This Windows game will run using a compatibility layer. You might encounter some issues or the game might not work at all.'
       ),
       title: t('infobox.warning', 'Warning'),
+      className: 'compatibility-warning',
       buttons: [
         {
           text: t('gamepage:box.dont-show-again', "Don't show again"),

src/frontend/types.ts

@@ -74,6 +74,7 @@ export type DialogModalOptions = {
   type?: DialogType
   onClose?: () => void
   isModal?: boolean
+  className?: string
 }
 
 export interface ExternalLinkDialogOptions {