feat: enhance modal and form responsiveness with dynamic sizing and adaptive styles

Author: MaximSamorukov

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

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

src/features/OrderConsultationButton/ui/OrderConsultationModal/index.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { ModalComponent } from '@/shared/ui/Modal';
 import { OrderConsultationForm } from './ui/OrderConsultationForm';
+import { useWindowWidth } from '@/shared/hooks';
 
 type ModalComponentProps = {
   open: boolean;
@@ -12,12 +13,17 @@ export const OrderConsultationModal: React.FC<ModalComponentProps> = ({
   open,
   onClose = () => {},
 }) => {
+  const windowWidth = useWindowWidth();
+  const style =
+    windowWidth >= 420
+      ? { height: 190 }
+      : { height: 'fitContent', width: '90%' };
   return (
     <ModalComponent
       open={open}
       onClose={onClose}
       withControl={false}
-      style={{ height: 190 }}
+      style={style}
     >
       <OrderConsultationForm />
     </ModalComponent>

src/features/OrderConsultationButton/ui/OrderConsultationModal/ui/OrderConsultationForm/SubmitButton/style.module.scss

@@ -13,6 +13,15 @@
     width: 300px;
     height: 35px;
     text-align: center;
+
+    @media (max-width: 310px) {
+      width: fit-content;
+      height: fit-content;
+      min-height: 35px;
+      box-sizing: border-box;
+      padding-right: 10px;
+      padding-left: 10px;
+    }
   }
 
   &:hover {

src/features/OrderConsultationButton/ui/OrderConsultationModal/ui/OrderConsultationForm/style.module.scss

@@ -14,9 +14,16 @@
     align-items: center;
     box-sizing: border-box;
     height: 50px;
+    @media (max-width: 420px) {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
     span {
       color: #e49e00;
       font-size: 20px;
+      @media (max-width: 420px) {
+        text-align: center;
+      }
     }
     &NotAuth {
       font-size: 16px;
@@ -32,6 +39,10 @@
     padding: 10px;
     padding-bottom: 0;
 
+    @media (max-width: 420px) {
+      align-items: center;
+    }
+
     &Errors {
       height: 15px;
       width: 80%;

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

@@ -13,6 +13,7 @@
     }
     @media (max-width: 520px) {
       flex-direction: column;
+      align-items: center;
       gap: 10px;
     }
   }
@@ -169,6 +170,10 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    @media (max-width: 370px) {
+      width: 100%;
+      flex-direction: column;
+    }
   }
 
   &Item {
@@ -181,6 +186,9 @@
     border: 2px solid #e49e00;
     padding-right: 4px;
     padding-left: 4px;
+    @media (max-width: 370px) {
+      width: 100%;
+    }
 
     &:hover {
       color: #e49e00;

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

@@ -40,6 +40,8 @@ $WIDTH: 800px;
   box-sizing: border-box;
   padding: 30px;
   position: relative;
+  background-color: #0a0a0a;
+
   @media (max-width: 820px) {
     width: 100%;
     padding: 20px;