style: improve mobile compatibility of certain manage pages (#678)

* style: improve mobile compatibility of certain manage pages

* style: improve mobile support for more manage pages

* fix: format issues

* chore: address pull request feedback

apps/nextjs/src/components/manage/manage-container.tsx

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from "react";
+import type { MantineSize } from "@mantine/core";
+import { Container } from "@mantine/core";
+
+export const ManageContainer = ({ children, size }: PropsWithChildren<{ size?: MantineSize }>) => {
+  return (
+    <Container size={size} px={{ base: "0 !important", md: "var(--mantine-spacing-md) !important" }}>
+      {children}
+    </Container>
+  );
+};

apps/nextjs/src/components/manage/mobile-affix-button.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import type { ButtonProps } from "@mantine/core";
+import { Affix, Button, createPolymorphicComponent } from "@mantine/core";
+
+type MobileAffixButtonProps = Omit<ButtonProps, "visibleFrom" | "hiddenFrom">;
+
+export const MobileAffixButton = createPolymorphicComponent<"button", MobileAffixButtonProps>(
+  forwardRef<HTMLButtonElement, MobileAffixButtonProps>((props, ref) => (
+    <>
+      <Button ref={ref} visibleFrom="md" {...props} />
+      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
+        <Button ref={ref} {...props} />
+      </Affix>
+    </>
+  )),
+);