fix: respect mobile header and widget interactions (#6730)

packages/widgets/src/modals/widget-edit-modal.module.css

@@ -143,6 +143,7 @@
   margin-inline: calc(var(--mantine-spacing-md) * -1);
   margin-bottom: calc(var(--mantine-spacing-md) * -1);
   padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  padding-bottom: max(var(--mantine-spacing-sm), env(safe-area-inset-bottom));
   border-top: 1px solid var(--mantine-color-default-border);
   background: color-mix(in srgb, var(--mantine-color-body) 94%, transparent);
   backdrop-filter: blur(10px);

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -36,7 +36,7 @@ import { objectEntries } from "@homarr/common";
 import { IntegrationProvider, useSession } from "@homarr/auth/client";
 import { useOptionalBoard } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
-import { createModal, modalSizeForm } from "@homarr/modals";
+import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
 import { SpotlightProvider } from "@homarr/spotlight";
 import { useI18n } from "@homarr/translation/client";
@@ -674,16 +674,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
 
   const footer = (
     <Box className={classes.footer}>
-      <Group justify="end" wrap="nowrap">
-        <Group gap="xs" wrap="nowrap">
-          <Button onClick={actions.closeModal} variant="subtle" color="gray">
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit" form={widgetFormId} loading={isSubmitting}>
-            {tCommon("action.saveChanges")}
-          </Button>
-        </Group>
-      </Group>
+      <ModalFormFooter onCancel={actions.closeModal} form={widgetFormId} loading={isSubmitting} />
     </Box>
   );