Adding a fullScreen option for our Dialog component.

src/components/dialog/Dialog.tsx

@@ -10,6 +10,7 @@ import CloseIcon from '@suid/icons-material/Close';
 
 const Dialog: Component<{
   open: boolean;
+  fullScreen?: boolean;
   title: JSXElement;
   closeHandler: (event: any, reason?: string) => void;
   children: JSXElement;
@@ -19,6 +20,7 @@ const Dialog: Component<{
       onClose={props.closeHandler}
       open={props.open}
       PaperProps={{ sx: { minWidth: '300px' } }}
+      fullScreen={props.fullScreen}
     >
       <DialogTitle
         sx={{

src/components/gpx-dialog/GpxDialog.tsx

@@ -1,11 +1,5 @@
 import { useI18n } from '@solid-primitives/i18n';
-import {
+import { Box, Button, IconButton, SvgIcon, TextField } from '@suid/material';
-  Box,
-  Button,
-  IconButton,
-  SvgIcon,
-  TextField,
-} from '@suid/material';
 import { cloneDeep } from 'lodash';
 import { Component, createSignal, Show } from 'solid-js';
 import dispatch from '../../workers/dispatcher-main';
@@ -150,7 +144,12 @@ const GpxDialog: Component<{}> = (props) => {
           </SvgIcon>
         </IconButton>
       </div>
-      <Dialog open={open()} title={t('gpxDialog')} closeHandler={handleClose}>
+      <Dialog
+        open={open()}
+        title={t('gpxDialog')}
+        closeHandler={handleClose}
+        fullScreen={true}
+      >
         <Box
           component='form'
           sx={{

src/components/gpx-import/GpxImport.tsx

@@ -53,6 +53,7 @@ const GpxImport: Component = () => {
         open={filesToImport() !== undefined}
         title={t('gpxImport')}
         closeHandler={handleClose}
+        fullScreen
       >
         <Box
           sx={{