style(junior): optimize challenge page to avoid scrolling

Author: aurelie-crouillebois

junior/app/components/robot-dialog.gjs

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 
 import didRender from '../modifiers/did-render';
 
-const ROBOT_IMAGE_OFFSET = 76;
+const ROBOT_IMAGE_OFFSET = 68;
 
 export default class RobotDialog extends Component {
   @tracked resizeObserver;

junior/app/styles/app.scss

@@ -48,7 +48,7 @@ b {
   max-width: 1730px;
 
   @include device-is('tablet') {
-    margin: 32px;
+    margin: 24px;
   }
 
   @include device-is('desktop') {

junior/app/styles/components/bubble.scss

@@ -1,6 +1,6 @@
 .bubble-container {
   display: flex;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 
 .bubble {
@@ -9,8 +9,13 @@
   height: fit-content;
   margin-right: 16px;
   margin-left: 8px;
-  padding: 12px 24px;
-  font-size: 1.5rem;
+  padding: 8px 20px;
+  font-size: 1.4rem;
+
+  @include device-is('tablet') {
+    font-size: 1.25rem;
+  }
+
   text-align: left;
   background-color: var(--pix-primary-100);
   border-radius: 16px 16px 16px 0;

junior/app/styles/components/challenge/challenge-item.scss

@@ -1,19 +1,19 @@
 .challenge-item {
   display: flex;
   align-content: center;
-  margin: 35px 140px 0;
+  margin: 16px 140px 0;
   transition: all 0.4s;
 
   @include device-is('tablet') {
-    margin: 35px 120px 0;
+    margin: 16px 120px 0;
   }
 
   &--single-display {
     flex-direction: column;
   }
 
   &__media {
-    width: 60%;
+    width: 50%;
     height: fit-content;
     margin-right: var(--pix-spacing-6x);
     padding: var(--pix-spacing-4x);
@@ -28,7 +28,7 @@
   }
 
   &__proposals {
-    width: 40%;
+    width: 50%;
 
     &--single-display {
       width: unset;

junior/app/styles/components/robot-dialog.scss

@@ -1,26 +1,32 @@
 .robot-speaking {
   display: flex;
   width: 100%;
-  margin-top: 30px;
+  margin-top: 24px;
+
+  @include device-is('tablet') {
+    margin-top: 12px;
+  }
 
   .bubbles {
     display: flex;
     flex-direction: column;
     justify-content: start;
     max-width: 80%;
-    margin-left: 130px;
+    margin-left: 140px;
+
+    @include device-is('tablet') {
+      margin-left: 120px;
+    }
   }
 
   &__logo {
     position: absolute;
     width: 128px;
     margin-top: -57px;
-    margin-right: var(--pix-spacing-3x);
 
     @include device-is('tablet') {
       width: 106px;
       margin-top: -37px;
-      margin-right: var(--pix-spacing-4x);
     }
   }
 }

junior/app/styles/pages/identified/missions/mission.scss

@@ -1,6 +1,7 @@
 .mission-page {
   &__body {
     display: flex;
+    margin-top: 16px;
     margin-left: 145px;
 
     @include device-is('tablet') {