Add device landscape notice

src/components/Dialog/Curve.tsx

@@ -1,4 +1,7 @@
-import { Typography } from 'antd';
+import {
+  Typography,
+  Grid,
+} from 'antd';
 import { useState } from 'react';
 import {
   CartesianGrid,
@@ -10,8 +13,11 @@ import {
   ResponsiveContainer,
   Label,
 } from 'recharts';
+import LandscapeNotice from './LandscapeNotice';
 import Table from './Table';
 
+const { useBreakpoint } = Grid;
+
 const Curve = ({
   name,
   xLabel,
@@ -46,11 +52,16 @@ const Curve = ({
     y: rawData[0][i],
   }));
   const [data, setData] = useState(mapData([yData, xData]));
+  const { sm } = useBreakpoint();
   const margin = 15;
   const mainColor = '#ccc';
   const tooltipBg = '#2E3338';
   const animationDuration = 500;
 
+  if (!sm) {
+    return <LandscapeNotice />;
+  }
+
   return (
     <>
       <Typography.Paragraph>

src/components/Dialog/LandscapeNotice.tsx

@@ -0,0 +1,5 @@
+import { Result } from 'antd';
+
+const LandscapeNotice = () => <Result title="Turn your device to landscape mode" />;
+
+export default LandscapeNotice;

src/components/Dialog/Map.tsx

@@ -11,6 +11,7 @@ import {
   Modal,
   Popover,
   Space,
+  Grid,
 } from 'antd';
 import {
   PlusCircleOutlined,
@@ -24,6 +25,7 @@ import {
   isIncrement,
   isReplace,
 } from '../../utils/keyboard/shortcuts';
+import LandscapeNotice from './LandscapeNotice';
 
 type CellsType = boolean[][];
 type DataType = number[][];
@@ -35,6 +37,8 @@ enum Operations {
 }
 type HslType = [number, number, number];
 
+const { useBreakpoint } = Grid;
+
 const Map = ({
   name,
   xData,
@@ -60,6 +64,7 @@ const Map = ({
   xUnits: string,
   yUnits: string,
 }) => {
+  const { sm } = useBreakpoint();
   const titleProps = { disabled: true };
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalValue, setModalValue] = useState<number | undefined>();
@@ -217,6 +222,10 @@ const Map = ({
       return result;
     });
 
+  if (!sm) {
+    return <LandscapeNotice />;
+  }
+
   return (
     <>
       <div className="table">