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

packages/forms-collection/src/board-create/board-create-form.tsx

@@ -49,8 +49,7 @@ export const BoardCreateForm = ({ onCancel }: BoardCreateFormProps) => {
               message: tBoard("action.create.notification.success.message", { name: values.name }),
             });
             const name = encodeURIComponent(result.name);
-            const layoutId = encodeURIComponent(result.layoutId);
-            router.push(`/boards/${name}?layout=${layoutId}&edit=true&add=true`);
+            router.push(`/boards/${name}`);
           },
           onError() {
             showErrorNotification({

packages/modals/src/modal-form-footer.tsx

@@ -7,6 +7,7 @@ import { useI18n } from "@homarr/translation/client";
 
 interface ModalFormFooterProps {
   onCancel: () => void;
+  form?: string;
   submitLabel?: string;
   cancelLabel?: string;
   loading?: boolean;
@@ -18,24 +19,38 @@ const ActionButtons = ({
   submitLabel,
   cancelLabel,
   loading,
-}: Pick<ModalFormFooterProps, "onCancel" | "submitLabel" | "cancelLabel" | "loading">) => {
-  const t = useI18n();
+  form,
+}: Pick<ModalFormFooterProps, "onCancel" | "submitLabel" | "cancelLabel" | "loading" | "form">) => {
+  const t = useI18n("common.action");
 
   return (
     <>
       <Button onClick={onCancel} variant="subtle" color="gray">
-        {cancelLabel ?? t("common.action.cancel")}
+        {cancelLabel ?? t("cancel")}
       </Button>
-      <Button type="submit" loading={loading}>
-        {submitLabel ?? t("common.action.saveChanges")}
+      <Button type="submit" form={form} loading={loading}>
+        {submitLabel ?? t("saveChanges")}
       </Button>
     </>
   );
 };
 
-export const ModalFormFooter = ({ onCancel, submitLabel, cancelLabel, loading, leftSection }: ModalFormFooterProps) => {
+export const ModalFormFooter = ({
+  onCancel,
+  form,
+  submitLabel,
+  cancelLabel,
+  loading,
+  leftSection,
+}: ModalFormFooterProps) => {
   const actionButtons = (
-    <ActionButtons onCancel={onCancel} submitLabel={submitLabel} cancelLabel={cancelLabel} loading={loading} />
+    <ActionButtons
+      onCancel={onCancel}
+      form={form}
+      submitLabel={submitLabel}
+      cancelLabel={cancelLabel}
+      loading={loading}
+    />
   );
 
   if (leftSection) {

packages/validation/src/header-preferences.ts

@@ -16,7 +16,7 @@ export const headerBuiltinItemIds = [
   "user",
 ] as const;
 
-export const requiredHeaderBuiltinItemIds = ["boardEdit", "boardSettings", "user"] as const;
+export const requiredHeaderBuiltinItemIds = ["user"] as const;
 
 export const headerPreferenceItemIds = headerBuiltinItemIds;
 export const headerItemIds = headerBuiltinItemIds;

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>
   );