From 151de1dcb88c0ddd642d34d853f06f22afdbfb31 Mon Sep 17 00:00:00 2001
From: Matthias Guillitte <matthias@guillitte.com>
Date: Wed, 23 Sep 2026 20:24:32 +0200
Subject: [PATCH] Responsive

---
 public/helptext/intro.md                                    | 2 +-
 resources/js/components/PerceptronDecisionGraph.vue         | 2 +-
 resources/js/components/PerceptronIterationsErrorsGraph.vue | 2 +-
 resources/js/pages/PerceptronViewer.vue                     | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/helptext/intro.md b/public/helptext/intro.md
index ed220b8..6e25266 100644
--- a/public/helptext/intro.md
+++ b/public/helptext/intro.md
@@ -4,7 +4,7 @@ Cet outil vous permet d'expérimenter avec les réseaux de neurones et les perce
 
 ## Contexte
 
-Ce projet a été d'abord créé pour un cours de réseaux de neurones artificiels que j'ai suivi durant mon master en Architecture des Systèmes Informatiques à la Haute École de la Province de Liège.  Il s'agit ici d'une version plus conviviale, documentée et optimisée. Cependant le projet n'est pas très mobile friendly et je conseille l'utilisation d'un écran horizontal. 📵
+Ce projet a été d'abord créé pour un cours de réseaux de neurones artificiels que j'ai suivi durant mon master en Architecture des Systèmes Informatiques à la Haute École de la Province de Liège.  Il s'agit ici d'une version plus conviviale, documentée et optimisée.
 
 Je conseille de finir de lire les prochains chapitres qui traitent des bases des réseaux de neurones et qui présentent l'interface. Je conseille ensuite d'utiliser les onglets au-dessus de la page dans l'ordre indiqué. Chaque onglet présente une évolution des réseaux de neurones dans l'ordre chronologique des découvertes et des améliorations faites.
 
diff --git a/resources/js/components/PerceptronDecisionGraph.vue b/resources/js/components/PerceptronDecisionGraph.vue
index efc4a41..88caf18 100644
--- a/resources/js/components/PerceptronDecisionGraph.vue
+++ b/resources/js/components/PerceptronDecisionGraph.vue
@@ -332,7 +332,7 @@ function getPerceptronDecisionBoundaryDataset(
 <template>
     <Chart
         v-if="props.cleanedDataset.length > 0 || props.iterations.length > 0"
-        class="flex bg-primary dark:bg-transparent!"
+        class="w-full flex bg-primary dark:bg-transparent!"
         type="scatter"
         :options="{
             responsive: true,
diff --git a/resources/js/components/PerceptronIterationsErrorsGraph.vue b/resources/js/components/PerceptronIterationsErrorsGraph.vue
index 2219cb3..fc13f69 100644
--- a/resources/js/components/PerceptronIterationsErrorsGraph.vue
+++ b/resources/js/components/PerceptronIterationsErrorsGraph.vue
@@ -92,7 +92,7 @@ const datasets = computed<ErrorDataset[]>(() => {
 <template>
     <Chart
         type="bar"
-        class="bg-primary dark:bg-transparent!"
+        class="w-full bg-primary dark:bg-transparent!"
         :options="{
             responsive: true,
             maintainAspectRatio: true,
diff --git a/resources/js/pages/PerceptronViewer.vue b/resources/js/pages/PerceptronViewer.vue
index 6cf8a71..22eed35 100644
--- a/resources/js/pages/PerceptronViewer.vue
+++ b/resources/js/pages/PerceptronViewer.vue
@@ -256,10 +256,10 @@ watch([iterations, trainingEnded], async () => {
             @update:training-id="setTrainingId"
         />
         <div
-            class="align-items-start justify-content-center grid max-w-dvw grid-cols-2"
+            class="align-items-start justify-content-center grid min-w-0 max-w-dvw grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(36rem,1fr))]"
             v-if="selectedDatasetName || iterations.length > 0"
         >
-            <div class="pt-3 h-dvh max-h-dvh min-h-0 w-full min-w-0">
+            <div class="order-2 pt-3 xl:h-dvh h-[50dvh] max-h-dvh min-h-0 w-full min-w-0 xl:order-0">
                 <ScrollArea ref="iterationScrollArea" :keep-bottom="true" type="scroll" class="relative h-full max-h-full min-h-0 w-full">
                     <IterationTable
                         :iterations="iterations"
@@ -305,7 +305,7 @@ watch([iterations, trainingEnded], async () => {
                     </template>
                 </ScrollArea>
             </div>
-            <div class="h-full w-full min-w-0 space-y-6">
+            <div class="order-1 h-full w-full min-w-0 space-y-6 md:order-0">
                 <div>
                     <PerceptronDecisionGraph
                         :cleanedDataset="cleanedDataset"