feat: Add responsive styles to price calculation forms and related UI components.

Author: MaximSamorukov

src/pages_layer/PriceCalculation/style.module.scss

@@ -7,4 +7,9 @@
   justify-content: flex-start;
   box-sizing: border-box;
   padding-top: 20px;
+
+  @media (max-width: 720px) {
+    padding: 10px;
+    padding-top: 20px;
+  }
 }

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

@@ -11,6 +11,10 @@
     &WithNoLabel {
       justify-content: center;
     }
+    @media (max-width: 520px) {
+      flex-direction: column;
+      gap: 10px;
+    }
   }
 
   &Label {

src/widgets/PriceCalculation/PriceCalculationForm/FileFormItem/style.module.scss

@@ -8,6 +8,11 @@
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
+
+    @media (max-width: 510px) {
+      flex-direction: column;
+      gap: 10px;
+    }
   }
 
   &Label {

src/widgets/PriceCalculation/PriceCalculationForm/style.module.scss

@@ -1,4 +1,3 @@
-@use 'sass:math';
 $WIDTH: 700px;
 .form {
   &Container {
@@ -7,8 +6,12 @@ $WIDTH: 700px;
     position: relative;
     &Loader {
       position: absolute;
-      top: calc(50% - 40px);
-      right: math.div($WIDTH, 2);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    @media (max-width: 720px) {
+      width: 100%;
     }
   }
   &Head {
@@ -17,9 +20,16 @@ $WIDTH: 700px;
     align-items: center;
     box-sizing: border-box;
     height: 50px;
+    @media (max-width: 400px) {
+      height: fit-content;
+      padding: 5px;
+    }
     span {
       color: #e49e00;
       font-size: 20px;
+      @media (max-width: 400px) {
+        text-align: center;
+      }
     }
   }
   &Body {