From fb102fc977bb6f57641fd27b8df99cf36cfc9c4d Mon Sep 17 00:00:00 2001
From: Sandra Guerreiro <sandragjacinto@gmail.com>
Date: Thu, 29 Jan 2026 17:29:26 +0100
Subject: [PATCH 1/2] feat(syllabus): make is responsive to mobile and tablet

---
 src/assets/base.css                           | 23 ++++-
 src/components/ModalWrapper.vue               |  6 ++
 src/components/tutor/CursusInfo.vue           | 31 ++++--
 src/components/tutor/SecondStep.vue           |  2 +-
 src/components/tutor/StatusModal.vue          | 56 +++++++++++
 src/components/tutor/StepsIndicator.vue       | 22 +++--
 src/components/tutor/SummariesStep.vue        | 30 +++---
 src/components/tutor/ThirdStep.vue            | 50 ++++++++--
 src/views/TutorPage.vue                       | 99 ++++---------------
 .../__snapshots__/TutorPage.test.ts.snap      | 18 ++--
 10 files changed, 212 insertions(+), 125 deletions(-)
 create mode 100644 src/components/tutor/StatusModal.vue

diff --git a/src/assets/base.css b/src/assets/base.css
index 171d119..abab754 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -194,6 +194,27 @@ html {
     margin-bottom: 1rem;
     margin-bottom: 1rem;
     font-weight: 600;
-    nt-weight: 600;
+    font-weight: 600;
+  }
+
+  @media screen and (max-width: 1280px) {
+    h1 {
+      font-size: 1.75rem;
+      margin-bottom: 1rem;
+      font-weight: 600;
+    }
+    h2 {
+      font-size: 1.5rem;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-weight: 600;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-weight: 600;
+    }
   }
 }
diff --git a/src/components/ModalWrapper.vue b/src/components/ModalWrapper.vue
index 8b0298a..17c9c7a 100644
--- a/src/components/ModalWrapper.vue
+++ b/src/components/ModalWrapper.vue
@@ -33,4 +33,10 @@ const handleModalClose = () => {
 .modal {
   --bulma-modal-content-width: 50%;
 }
+
+@media screen and (max-width: 1024px) {
+  .modal {
+    --bulma-modal-content-width: 90%;
+  }
+}
 </style>
diff --git a/src/components/tutor/CursusInfo.vue b/src/components/tutor/CursusInfo.vue
index 9072e52..d191a81 100644
--- a/src/components/tutor/CursusInfo.vue
+++ b/src/components/tutor/CursusInfo.vue
@@ -94,8 +94,8 @@ const appendNewInputFile = () => {
 
 <template>
   <div id="target-1" class="wrapper">
-    <h1 class="title is-4">1 - {{ $t('tutor.firstStep.title') }}</h1>
-    <p class="subtitle is-6">{{ $t('tutor.firstStep.description') }}</p>
+    <h1 class="title is-4 is-size-5-mobile">1 - {{ $t('tutor.firstStep.title') }}</h1>
+    <p class="subtitle is-6 is-size-6-mobile">{{ $t('tutor.firstStep.description') }}</p>
 
     <!-- File Input Section -->
     <div class="is-flex is-flex-direction-column">
@@ -136,12 +136,14 @@ const appendNewInputFile = () => {
     </p>
 
     <!-- Course Description Section -->
-    <h2 class="title is-6 mt-4">
+    <h2 class="title is-6 mt-4 is-size-6-mobile">
       {{ $t('tutor.firstStep.cursusDescriptionTitle') }}
     </h2>
-    <p class="subtitle is-6">{{ $t('tutor.firstStep.cursusDescriptionDescription') }}</p>
+    <p class="subtitle is-6 is-size-6-mobile">
+      {{ $t('tutor.firstStep.cursusDescriptionDescription') }}
+    </p>
 
-    <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between descriptions">
+    <div class="cursus-details">
       <div class="description">
         <label for="cursus-title">{{ $t('tutor.firstStep.cursusTitleLabel') }}</label>
         <input
@@ -248,8 +250,25 @@ const appendNewInputFile = () => {
   pointer-events: none;
 }
 
-.descriptions {
+.cursus-details {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: 0.5rem;
   margin-bottom: 1rem;
 }
+
+@media screen and (max-width: 768px) {
+  .cursus-details {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .description {
+    width: 100%;
+    max-height: none;
+  }
+}
 </style>
diff --git a/src/components/tutor/SecondStep.vue b/src/components/tutor/SecondStep.vue
index 272df75..671278a 100644
--- a/src/components/tutor/SecondStep.vue
+++ b/src/components/tutor/SecondStep.vue
@@ -18,7 +18,7 @@ defineProps<{
 <template>
   <div id="target-3" class="wrapper" :class="{ disabled: disabled, visible: visible }">
     <div class="sources-wrapper" v-if="sources && sources.length">
-      <h1 data-testId="documents-list-title" class="title is-4">
+      <h1 data-testId="documents-list-title" class="title is-4 is-size-5-mobile mt-4">
         3 - {{ $t('tutor.secondStep.title') }}
       </h1>
       <p class="subtitle is-6">{{ $t('tutor.secondStep.description') }}</p>
diff --git a/src/components/tutor/StatusModal.vue b/src/components/tutor/StatusModal.vue
new file mode 100644
index 0000000..43f452b
--- /dev/null
+++ b/src/components/tutor/StatusModal.vue
@@ -0,0 +1,56 @@
+<template>
+  <ModalWrapper v-if="isLoading" :isOpen="isLoading" :onClose="stopAction">
+    <div v-if="shouldRetryAction" class="box">
+      <div class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center">
+        <h1 class="title is-size-4 is-size-5-mobile has-text-centered">
+          <span class="mr-4"><ErrorDocumentIcon /></span>
+          {{ $t('tutor.retry.title') }}
+        </h1>
+
+        <p class="loader-text is-title is-size-4 is-size-5-mobile mx-6 px-6">
+          {{ $t('tutor.retry.description') }}
+        </p>
+        <div class="is-flex is-gap-4">
+          <button data-testid="tutor-back-button" class="button mt-6" @click="action">
+            {{ $t('tutor.retry.button') }}
+          </button>
+          <button data-testid="tutor-back-button" class="button mt-6" @click="stopAction()">
+            {{ $t('tutor.retry.stop') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-else class="box loading-modal has-text-centered">
+      <h1 class="title is-size-4 is-size-5-mobile">
+        {{ title }}
+      </h1>
+      <progress class="progress is-large is-primary mb-6" max="100">60%</progress>
+      <p class="is-title is-size-5 is-size-6-mobile">{{ $t('tutor.loading.wait') }}</p>
+      <p class="is-title is-size-5 is-size-6-mobile">
+        {{ description }}
+      </p>
+    </div>
+  </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import ModalWrapper from '@/components/ModalWrapper.vue';
+import ErrorDocumentIcon from '@/components/icons/ErrorDocumentIcon.vue';
+
+defineProps<{
+  isLoading: boolean;
+  shouldRetryAction: boolean;
+  action: () => Promise<void>;
+  stopAction: () => void;
+  title: string;
+  description: string;
+}>();
+</script>
+
+<style scoped>
+.loading-modal {
+  padding: 2rem;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/tutor/StepsIndicator.vue b/src/components/tutor/StepsIndicator.vue
index c51131e..b984517 100644
--- a/src/components/tutor/StepsIndicator.vue
+++ b/src/components/tutor/StepsIndicator.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i + 1);
 </script>
 <template>
-  <div class="is-flex">
+  <div class="wrapper">
     <a
       href="#"
       class="step-indicator"
@@ -24,6 +24,16 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
   </div>
 </template>
 <style scoped>
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  background-color: var(--neutral-10);
+  padding: 0.5rem;
+  border-radius: 1rem;
+}
+
 .step-indicator {
   margin: 0 0.5rem;
   padding: 0 0.5rem;
@@ -45,10 +55,10 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
   color: var(--neutral-50);
 }
 
-.is-flex {
-  gap: 5rem;
-  background-color: var(--neutral-10);
-  padding: 0.5rem;
-  border-radius: 1rem;
+@media screen and (max-width: 768px) {
+  .wrapper {
+    gap: 0.5rem;
+    padding: 0.2rem;
+  }
 }
 </style>
diff --git a/src/components/tutor/SummariesStep.vue b/src/components/tutor/SummariesStep.vue
index 81f568d..691f9a3 100644
--- a/src/components/tutor/SummariesStep.vue
+++ b/src/components/tutor/SummariesStep.vue
@@ -56,7 +56,7 @@ const handleTextEdit = (event, index) => {
 </script>
 <template>
   <div id="target-2" class="summaries-section" :class="{ disabled: disabled }">
-    <h2 data-testid="tutor-summaries-title" class="title is-4 mt-4">
+    <h2 data-testid="tutor-summaries-title" class="title is-4 is-size-5-mobile mt-4">
       2 - {{ $t('tutor.summaries.title') }}
     </h2>
     <p class="subtitle is-6">
@@ -66,20 +66,9 @@ const handleTextEdit = (event, index) => {
       <h2 class="title is-6 mt-4">
         {{ Object.values(files)[index]?.name || $t('tutor.summaries.noFileName') }}
       </h2>
-      <div class="is-flex">
-        <p
-          :id="`summary_${index}`"
-          class="input summary"
-          :contenteditable="editableParagraphs[index]"
-          @keydown="preventLineBreaks"
-          @paste="sanitizePaste"
-          @blur="handleTextEdit($event, index)"
-          :class="{ validated: !editableParagraphs[index] }"
-        >
-          {{ summary }}
-        </p>
-        <div class="mt-2 ml-2">
-          <button class="button is-white mt-2" @click="toggleEdit(index, true)">
+      <div class="is-flex is-flex-wrap-wrap">
+        <div class="mt-2 ml-auto is-flex is-align-items-center">
+          <button class="button is-white" @click="toggleEdit(index, true)">
             <span class="icon is-small">
               <EditIcon />
             </span>
@@ -97,6 +86,17 @@ const handleTextEdit = (event, index) => {
             <span>{{ editableParagraphs[index] ? $t('validate') : $t('validated') }}</span>
           </button>
         </div>
+        <p
+          :id="`summary_${index}`"
+          class="input summary"
+          :contenteditable="editableParagraphs[index]"
+          @keydown="preventLineBreaks"
+          @paste="sanitizePaste"
+          @blur="handleTextEdit($event, index)"
+          :class="{ validated: !editableParagraphs[index] }"
+        >
+          {{ summary }}
+        </p>
       </div>
     </div>
     <div class="is-flex is-justify-content-end mt-4">
diff --git a/src/components/tutor/ThirdStep.vue b/src/components/tutor/ThirdStep.vue
index d999aa2..6b8a775 100644
--- a/src/components/tutor/ThirdStep.vue
+++ b/src/components/tutor/ThirdStep.vue
@@ -33,7 +33,9 @@ const handleTextEdit = (event, index) => {
 </script>
 <template>
   <div id="target-4" class="wrapper" :class="{ disabled: disabled }">
-    <h1 data-testid="thirdStepTitle" class="title is-4">4 - {{ $t('tutor.thirdStep.title') }}</h1>
+    <h1 data-testid="thirdStepTitle" class="title is-4 is-size-5-mobile">
+      4 - {{ $t('tutor.thirdStep.title') }}
+    </h1>
     <p class="subtitle is-6">{{ $t('tutor.thirdStep.description') }}</p>
     <!-- syllabus -->
 
@@ -60,25 +62,38 @@ const handleTextEdit = (event, index) => {
 
     <textarea class="textarea" v-if="enableFeedback" v-model="feedback"></textarea>
 
-    <div class="is-flex is-justify-content-end mt-4 pb-6">
-      <button class="button mr-auto" @click="restart">
-        {{ $t('tutor.restartSyllabusCreation') }}
-      </button>
-      <button class="button" @click="toggleFeedback">
+    <div class="actions">
+      <button class="button feedback" @click="toggleFeedback">
         {{
           enableFeedback ? $t('tutor.thirdStep.sendFeedback') : $t('tutor.thirdStep.giveFeedback')
         }}
       </button>
-      <button class="button is-primary ml-2" @click="action()">{{ $t('download') }}</button>
+      <button class="button is-primary" @click="action()">{{ $t('download') }}</button>
+      <button class="button" @click="restart">
+        {{ $t('tutor.restartSyllabusCreation') }}
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
+.actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: end;
+  padding-bottom: 3rem;
+  gap: 1rem;
+}
+
+.button.feedback {
+  margin-right: auto;
+}
+
 .button > svg {
   height: 1rem;
   padding-right: 1rem;
 }
+
 .wrapper {
   display: flex;
   height: 100%;
@@ -120,4 +135,25 @@ details:not([open]) {
   border: 2px solid var(--primary);
   background-color: var(--neutral-0);
 }
+
+@media screen and (max-width: 1280px) {
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+  .button.feedback {
+    margin-right: 0;
+  }
+
+  .syllabus {
+    padding: 1rem;
+  }
+
+  .content h2 {
+    font-size: 1.25rem;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+  }
+}
 </style>
diff --git a/src/views/TutorPage.vue b/src/views/TutorPage.vue
index d257e00..b1ffb52 100644
--- a/src/views/TutorPage.vue
+++ b/src/views/TutorPage.vue
@@ -5,10 +5,9 @@ import SummariesStep from '@/components/tutor/SummariesStep.vue';
 import SourcesList from '@/components/tutor/SecondStep.vue';
 import EditableSyllabus from '@/components/tutor/ThirdStep.vue';
 import StepsIndicator from '@/components/tutor/StepsIndicator.vue';
-import ModalWrapper from '@/components/ModalWrapper.vue';
 import ErrorComponent from '@/components/ErrorComponent.vue';
-import ErrorDocumentIcon from '@/components/icons/ErrorDocumentIcon.vue';
 import { useTutorStore } from '@/stores/tutor';
+import StatusModal from '@/components/tutor/StatusModal.vue';
 
 const store = useTutorStore();
 
@@ -38,7 +37,7 @@ const getI18nText = computed(() => {
   }
 });
 
-const stepToAction: Record<0 | 1 | 2 | 3 | 4, () => Promise<void>> = {
+const stepToAction: Record<1 | 2 | 3 | 4, (arg?: any) => Promise<void>> = {
   1: store.handleSummaryFiles,
   2: store.retrieveTutorSearch,
   3: store.handleCreateSyllabus,
@@ -47,8 +46,8 @@ const stepToAction: Record<0 | 1 | 2 | 3 | 4, () => Promise<void>> = {
 </script>
 <template>
   <div class="content-centered-wrapper">
-    <div class="is-flex is-justify-content-center is-align-items-center">
-      <p class="subtitle has-text-weight-bold is-5 mr-4 my-auto">
+    <div class="is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center mt-4">
+      <p class="subtitle has-text-weight-bold is-5 is-size-6-mobile mr-4 my-auto">
         {{ $t('tutor.syllabusSteps') }}
       </p>
 
@@ -60,45 +59,15 @@ const stepToAction: Record<0 | 1 | 2 | 3 | 4, () => Promise<void>> = {
       />
     </div>
     <ErrorComponent v-if="store.reloadError" />
+    <StatusModal
+      :isLoading="store.isLoading"
+      :shouldRetryAction="store.shouldRetryAction"
+      :action="stepToAction[store.step]"
+      :stopAction="store.stopAction"
+      :title="$t(getI18nText.title)"
+      :description="$t(getI18nText.description)"
+    />
 
-    <ModalWrapper v-if="store.isLoading" :isOpen="store.isLoading" :onClose="store.stopAction">
-      <div v-if="store.shouldRetryAction" class="box">
-        <div
-          class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
-        >
-          <h1 class="title is-size-4 has-text-centered">
-            <span class="mr-4"><ErrorDocumentIcon /></span>
-            {{ $t('tutor.retry.title') }}
-          </h1>
-
-          <p class="loader-text is-title is-size-4 mx-6 px-6">
-            {{ $t('tutor.retry.description') }}
-          </p>
-          <div class="is-flex is-gap-4">
-            <button
-              data-testid="tutor-back-button"
-              class="button mt-6"
-              @click="stepToAction[store.step]()"
-            >
-              {{ $t('tutor.retry.button') }}
-            </button>
-            <button data-testid="tutor-back-button" class="button mt-6" @click="store.stopAction()">
-              {{ $t('tutor.retry.stop') }}
-            </button>
-          </div>
-        </div>
-      </div>
-      <div v-else class="box loading-modal">
-        <h1 class="title is-size-4 has-text-centered">
-          {{ $t(getI18nText.title) }}
-        </h1>
-        <progress class="progress is-large is-primary mb-6" max="100">60%</progress>
-        <p class="loader-text is-title is-size-5">{{ $t('tutor.loading.wait') }}</p>
-        <p class="loader-text is-title is-size-5">
-          {{ $t(getI18nText.description) }}
-        </p>
-      </div>
-    </ModalWrapper>
     <div class="layout-flex">
       <CursusInfo
         :selectLang="store.selectSyllabusLanguage"
@@ -156,51 +125,21 @@ const stepToAction: Record<0 | 1 | 2 | 3 | 4, () => Promise<void>> = {
   overflow: hidden;
 }
 
-.box {
-  overflow: auto;
-  width: 100%;
-  margin: auto;
-}
-
-.content {
-  height: 100%;
-  width: 80%;
-}
-
-.actions {
-  display: flex;
-  gap: 1rem;
-}
-
 .layout-flex {
   width: 100%;
   overflow-y: auto;
   padding: 1rem 20%;
 }
 
-.flex-wrap {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  height: 100%;
-}
-
-.flex-wrap.shrink {
-  flex-grow: 0.7;
-  flex-basis: 10%;
-  & > * {
-    flex-basis: 100%;
-    transition: flex-grow 0s;
+@media screen and (max-width: 1024px) {
+  .layout-flex {
+    padding-inline: 10%;
   }
 }
 
-.loading-modal {
-  padding: 2rem;
-  width: 100%;
-  height: 100%;
-}
-
-.loader-text {
-  text-align: center;
+@media screen and (max-width: 768px) {
+  .layout-flex {
+    padding-inline: 5%;
+  }
 }
 </style>
diff --git a/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap b/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap
index 1ebcf93..2ebaa2d 100644
--- a/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap
+++ b/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap
@@ -6,17 +6,17 @@ exports[`TutorPage > renders properly 1`] = `
   data-v-8a8621cb=""
 >
   <div
-    class="is-flex is-justify-content-center is-align-items-center"
+    class="is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center mt-4"
     data-v-8a8621cb=""
   >
     <p
-      class="subtitle has-text-weight-bold is-5 mr-4 my-auto"
+      class="subtitle has-text-weight-bold is-5 is-size-6-mobile mr-4 my-auto"
       data-v-8a8621cb=""
     >
       tutor.syllabusSteps
     </p>
     <div
-      class="is-flex"
+      class="wrapper"
       data-v-050e406a=""
       data-v-8a8621cb=""
     >
@@ -66,13 +66,13 @@ exports[`TutorPage > renders properly 1`] = `
       id="target-1"
     >
       <h1
-        class="title is-4"
+        class="title is-4 is-size-5-mobile"
         data-v-5582d651=""
       >
         1 - tutor.firstStep.title
       </h1>
       <p
-        class="subtitle is-6"
+        class="subtitle is-6 is-size-6-mobile"
         data-v-5582d651=""
       >
         tutor.firstStep.description
@@ -131,19 +131,19 @@ exports[`TutorPage > renders properly 1`] = `
       <!--v-if-->
       <!-- Course Description Section -->
       <h2
-        class="title is-6 mt-4"
+        class="title is-6 mt-4 is-size-6-mobile"
         data-v-5582d651=""
       >
         tutor.firstStep.cursusDescriptionTitle
       </h2>
       <p
-        class="subtitle is-6"
+        class="subtitle is-6 is-size-6-mobile"
         data-v-5582d651=""
       >
         tutor.firstStep.cursusDescriptionDescription
       </p>
       <div
-        class="is-flex is-flex-wrap-wrap is-justify-content-space-between descriptions"
+        class="cursus-details"
         data-v-5582d651=""
       >
         <div
@@ -342,7 +342,7 @@ exports[`TutorPage > renders properly 1`] = `
       id="target-2"
     >
       <h2
-        class="title is-4 mt-4"
+        class="title is-4 is-size-5-mobile mt-4"
         data-testid="tutor-summaries-title"
         data-v-834edf8c=""
       >

From 0e4112cdfaf1ee5fd3e748fca880733fedadac50 Mon Sep 17 00:00:00 2001
From: Sandra Guerreiro <sandragjacinto@gmail.com>
Date: Thu, 29 Jan 2026 17:32:44 +0100
Subject: [PATCH 2/2] fix microlearning nav in dev

---
 src/router/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 261acf3..6b4b6f7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,7 +6,7 @@ import Tutor from '@/views/TutorPage.vue';
 import NotFound from '@/views/NotFound.vue';
 import MicroLearning from '@/views/MicroLearning.vue';
 
-const isDevEnvironment = import.meta.env.VITE_ENVIRONMENT === 'dev';
+const isDevEnvironment = (import.meta.env.VITE_ENVIRONMENT || '').trim().includes('dev');
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),