Responsive

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.
 

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,

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,

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"