feat: Add responsive height and overflow scrolling to order modal for smaller screens.

Author: MaximSamorukov

src/features/OrderButton/ui/MakeOrderModal/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { ModalComponent } from '@/shared/ui/Modal';
-import { useWindowWidth } from '@/shared/hooks';
+import { useWindowHeight, useWindowWidth } from '@/shared/hooks';
 
 type ModalComponentProps = {
   open: boolean;
@@ -15,13 +15,16 @@ export const MakeOrderModal: React.FC<ModalComponentProps> = ({
   children,
 }) => {
   const windowWidth = useWindowWidth();
-  const width = windowWidth >= 820 ? 800 : '90%';
+  const windowHeight = useWindowHeight();
+  const width = windowWidth >= 820 ? 800 : '85%';
+  const height = windowHeight >= 700 ? 645 : '90%';
+
   return (
     <ModalComponent
       open={open}
       onClose={onClose}
       withControl={false}
-      style={{ height: 645, width, border: 'none' }}
+      style={{ height, width, border: 'none' }}
     >
       {children}
     </ModalComponent>

src/shared/hooks/index.ts

@@ -16,3 +16,20 @@ export function useWindowWidth() {
 
   return width;
 }
+
+export function useWindowHeight() {
+  const [height, setHeight] = useState(
+    typeof window !== 'undefined' ? window.innerHeight : 0,
+  );
+
+  useEffect(() => {
+    const onResize = () => setHeight(window.innerHeight);
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  return height;
+}

src/shared/ui/OrderForm/style.module.scss

@@ -42,6 +42,10 @@ $WIDTH: 800px;
   position: relative;
   background-color: #0a0a0a;
 
+  @media (max-width: 820px) and (max-height: 900px) {
+    overflow-y: scroll;
+    max-height: 100%;
+  }
   @media (max-width: 820px) {
     width: 100%;
     padding: 20px;
@@ -59,7 +63,11 @@ $WIDTH: 800px;
     justify-content: center;
     align-items: center;
     @media (max-width: 820px) {
-      width: 90%;
+      width: 100%;
+    }
+
+    @media (max-width: 820px) and (max-height: 900px) {
+      max-height: 100%;
     }
   }
   &HeaderLabel {