make scorecard form mobile friendly

Author: vas3a

src/apps/review/src/pages/scorecards/EditScorecardPage/EditScorecardPage.module.scss

@@ -35,6 +35,9 @@
   background-color: #F6F7F9;
   border-radius: $sp-2;
   padding: $sp-8;
+  @include ltemd {
+    padding: $sp-3;
+  }
 }
 
 .scorecardInfo {
@@ -60,11 +63,25 @@
         display: flex;
         gap: $sp-4;
         width: 100%;
+        @include ltemd {
+            flex-wrap: wrap;
+            position: relative;
+
+            .trashIcon {
+                position: absolute;
+                bottom: 100%;
+                right: 0;
+                flex: 0 0 100%;
+            }
+        }
     }
 }
 
 .contentArea {
     padding: $sp-5 $sp-4;
+    @include ltemd {
+        padding: $sp-3;
+    }
 }
 
 .groupWrap {
@@ -76,6 +93,9 @@
     .contentArea {
         background: #E0E4E84D;
         padding: $sp-10 $sp-8;
+        @include ltemd {
+            padding: $sp-3;
+        }
     }
 }
 
@@ -92,8 +112,11 @@
 
 .questionWrap {
     .questionItem {
+        --pad-x: #{$sp-4};
+        --pad-y: #{$sp-5};
+
         width: 100%;
-        padding: $sp-5 $sp-4;
+        padding: var(--pad-y) var(--pad-x);
         background: #F6F7F9;
 
         display: grid;
@@ -120,6 +143,42 @@
     .headerAreaLabel {
         width: 100%;
     }
+
+    @include ltemd {
+        .questionItem {
+            --pad-x: #{$sp-3};
+            --pad-y: #{$sp-3};
+            position: relative;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto auto;
+            gap: $sp-4;
+
+            :global(.main-group) {
+                grid-column: 1 / -1;
+            }
+
+            :global(.weight-group) {
+                grid-column: 1 / -1;
+            }
+
+            :global(.action-group) {
+                position: absolute;
+                top: var(--pad-y);
+                right: var(--pad-x);
+                height: 28px;
+            }
+
+            .doubleInputWrap {
+                display: flex;
+                flex-direction: column;
+                gap: $sp-4;
+
+                > * {
+                    flex: 1;
+                }
+            }
+        }
+    }
 }
 
 .xlWidthInput {
@@ -135,6 +194,15 @@
     flex: 0 0 40%;
 }
 
+.xlWidthInput,
+.smWidthInput,
+.mdWidthInput {
+    @include ltemd {
+        flex: 0 0 100%;
+    }
+}
+
+
 .doubleInputWrap {
     display: flex;
     gap: $sp-3;
@@ -160,6 +228,10 @@
     justify-content: space-between;
     align-items: center;
     margin-top: $sp-5;
+    @include ltemd {
+        flex-direction: column;
+        align-items: center;
+    }
 }
 
 .bottomContainer {

src/apps/review/src/pages/scorecards/EditScorecardPage/components/BasicSelect.tsx

@@ -26,7 +26,7 @@ const BasicSelect: FC<BasicSelectProps<any>> = props => (
         {props.options.map(option => (
             <option
                 key={`${option.value}`}
-                value={option.value as string}
+                value={`${option.value}`}
             >
                 {option.label}
             </option>

src/apps/review/src/pages/scorecards/EditScorecardPage/components/CalculatedWeightsSum.module.scss

@@ -6,13 +6,21 @@
     align-items: center;
 
     margin-right: 56px;
+
+    @include ltemd {
+        margin-right: 0;
+    }
 }
 
 .labels {
     text-align: right;
     > * {
         line-height: 20px;
     }
+
+    @include ltemd {
+        text-align: left;
+    }
 }
 
 .value {

src/libs/ui/lib/components/button/base-button/BaseButton.module.scss

@@ -253,4 +253,5 @@ $btn-secondary-border-width: $border;
     --btn-secondary-border-width: 1px;
 
     font-weight: $font-weight-medium;
+    font-family: "Nunito Sans", sans-serif;
 }