Responsive

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"