add mobile warning

src/Header.tsx

@@ -8,6 +8,7 @@ import {
   rem,
   Image,
   Menu,
+  Dialog,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
@@ -27,6 +28,12 @@ const useStyles = createStyles((theme) => ({
     },
   },
 
+  warning: {
+    [theme.fn.largerThan("md")]: {
+      display: "none",
+    },
+  },
+
   burger: {
     // [theme.fn.largerThan("xs")]: {
     display: "none",
@@ -66,7 +73,8 @@ interface HeaderSimpleProps {
 }
 
 export function HeaderSimple({ links }: HeaderSimpleProps) {
-  const [opened, { toggle }] = useDisclosure(false);
+  // const [opened, { toggle }] = useDisclosure(false);
+  const [opened, { toggle, close }] = useDisclosure(true);
   const [active, setActive] = useState("");
   const { classes, cx } = useStyles();
 
@@ -91,6 +99,17 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
 
   return (
     <Header height={60}>
+      <Dialog
+        opened={opened}
+        withCloseButton
+        onClose={close}
+        size="lg"
+        radius="md"
+        position={{ top: 70, right: 20 }}
+        className={classes.warning}
+      >
+        Полная версия портала доступна с компьютера
+      </Dialog>
       <Container className={classes.header}>
         {/* <Title order={3}><Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor></Title> */}
         {/* <MantineLogo size={28} /> */}

src/KartaPage.tsx

@@ -305,7 +305,7 @@ export function KartaPage() {
           padding: "1rem 0 1rem 1rem",
         }}
         sx={{
-          "@media (max-width: 40em)": {
+          "@media (max-width: 60em)": {
             display: "none",
           },
         }}