PM-2135 - mobile ui

Author: vas3a

src/apps/review/src/pages/ai-scorecards/components/AiModelModal/AiModelModal.module.scss

@@ -1,9 +1,19 @@
 @import '@libs/ui/styles/includes';
 
+.wrap {
+    @include ltemd {
+        padding-top: $sp-15;
+    }
+}
+
 .modelNameWrap {
     display: flex;
     align-items: center;
     gap: $sp-4;
+    @include ltemd {
+        flex-direction: column;
+        gap: $sp-4;
+    }
 }
 
 .modelIcon {
@@ -38,6 +48,13 @@
         width: 16px;
         height: 16px;
     }
+
+    @include ltemd {
+        h3 {
+            font-size: 22px;
+            line-height: 26px;
+        }
+    }
 }
 
 .modelDescription {

src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.module.scss

@@ -2,11 +2,18 @@
 
 .wrap {
     width: 100%;
+    color: #0A0A0A;
 }
 
 .headerWrap {
     display: flex;
     align-items: flex-start;
+
+    @include ltemd {
+        flex-direction: column;
+        align-items: stretch;
+        gap: $sp-6;
+    }
 }
 
 .workflowInfo {
@@ -27,19 +34,20 @@
     justify-content: center;
 
     flex: 0 0 auto;
+    @include ltemd {
+        width: 56px;
+        height: 56px;
+    }
 }
 
 .workflowName {
-    display: flex;
-    flex-direction: column;
-    gap: $sp-2;
-
     h3 {
         font-family: "Figtree", sans-serif;
         font-size: 26px;
         font-weight: 700;
         line-height: 30px;
         color: #0A0A0A;
+        margin-bottom: $sp-2;
     }
 
     span {
@@ -49,6 +57,17 @@
         font-size: 16px;
         line-height: 22px;
     }
+
+    .modelName {
+        cursor: pointer;
+    }
+
+    @include ltemd {
+        h3 {
+            font-size: 22px;
+            line-height: 26px;
+        }
+    }
 }
 
 .workflowRunStats {
@@ -77,6 +96,10 @@
         line-height: 19px;
         color: var(--FontColor);
     }
+
+    @include ltemd {
+        margin-left: 0;
+    }
 }
 
 .workflowDescription {

src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.tsx

@@ -41,7 +41,7 @@ const ScorecardHeader: FC = () => {
                     <IconDeepseekAi className={styles.workflowIcon} />
                     <div className={styles.workflowName}>
                         <h3>{workflow.name}</h3>
-                        <span onClick={toggleModelDetails}>{workflow.llm.name}</span>
+                        <span className={styles.modelName} onClick={toggleModelDetails}>{workflow.llm.name}</span>
                     </div>
                 </div>
                 <div className={styles.workflowRunStats}>