From 434e911eeaa35aded93a5cd9df6ee3754b34a349 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Fri, 13 Jan 2023 08:48:05 +0100
Subject: [PATCH] VBV-232: Fix mobile view

---
 .../src/components/learningPath/SelfEvaluation.vue | 14 +++++++++-----
 cypress/support/commands.js                        |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index 6a4fdd73..ef49d6f6 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -92,16 +92,20 @@ function handleBack() {
             {{ $t("selfEvaluation.progressLink") }}
           </div>
         </div>
-        <nav class="mt-16 flex justify-between">
+        <nav class="mt-16 flex lg:justify-between">
           <button
             v-if="showBackButton"
-            class="btn-secondary flex items-center"
+            class="btn-secondary flex items-center mr-2"
             @click="handleBack()"
+            data-cy="previous-step"
           >
-            <it-icon-arrow-left class="w-6 h-6 ml-2"></it-icon-arrow-left>
+            <it-icon-arrow-left class="w-6 h-6 mr-2"></it-icon-arrow-left>
             {{ $t("general.backCapitalized") }}
           </button>
-          <button class="btn-secondary flex items-center" @click="handleContinue()">
+          <button
+            class="btn-secondary flex items-center"
+            @click="handleContinue()"
+            data-cy="next-step">
             {{ $t("general.next") }}
             <it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right>
           </button>
@@ -111,7 +115,7 @@ function handleBack() {
           :aria-valuenow="state.questionIndex + 1"
           :aria-valuemax="questions.length"
           :aria-valuemin="1"
-          class="absolute bottom-[86px] h-1 left-4 right-4 inline-flex gap-1"
+          class="absolute bottom-[86px] h-1 left-0 right-0 lg:left-4 lg:right-4 inline-flex gap-1"
         >
           <span
             v-for="i in questions.length"
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index ad305178..51d116e2 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -103,7 +103,7 @@ Cypress.Commands.add('makeSelfEvaluation', (answers) => {
     } else {
       cy.get('[data-cy="fail"]').click();
     }
-    cy.get('[data-cy="complete-and-continue"]').click();
+    cy.get('[data-cy="next-step"]').click();
   }
 });