From 5e11856d09880e98718ccb913cff4a39e4e8e976 Mon Sep 17 00:00:00 2001
From: Sebastian Wachter <sebastian.wachter@breuninger.de>
Date: Wed, 19 Jun 2024 11:59:17 +0200
Subject: [PATCH 1/3] Fix typo.

---
 content/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/index.md b/content/index.md
index ac352cb..d469d5c 100644
--- a/content/index.md
+++ b/content/index.md
@@ -5,7 +5,7 @@ description: 'Landingpage'
 
 # AM32-MultiRotor-ESC-firmware
 
-Firmware for STM32F051 based speed controllers for use with mutirotors
+Firmware for STM32F051 based speed controllers for use with multirotors
 <p align="left">
   <a href="/LICENSE"><img src="https://img.shields.io/badge/license-GPL--3.0-brightgreen" alt="GitHub license" /></a>
 </p>

From cac114d1b986e29ef64b4abe2c14d2416974cce7 Mon Sep 17 00:00:00 2001
From: Sebastian Wachter <sebastian.wachter@breuninger.de>
Date: Wed, 19 Jun 2024 12:00:06 +0200
Subject: [PATCH 2/3] Fix responsive layout of serial device selection and
 connection.

---
 components/SerialDevice.vue | 44 +++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/components/SerialDevice.vue b/components/SerialDevice.vue
index 40f77ff..e141b9b 100644
--- a/components/SerialDevice.vue
+++ b/components/SerialDevice.vue
@@ -1,23 +1,45 @@
 <template>
-  <div class="min-w-[320px]">
-    <div class="p-4 grid grid-cols-1 gap-2">
-      <div class="flex flex-column gap-2">
-        <USelectMenu v-model="serialStore.selectedDevice" class="flex-grow" :disabled="serialStore.hasConnection" :options="serialStore.pairedDevicesOptions" placeholder="Select device" />
+  <div>
+    <div class="p-4 grid grid-cols-1 2xl:grid-cols-2 gap-2">
+      <div class="flex flex-col">
+        <USelectMenu
+          v-model="serialStore.selectedDevice"
+          class="flex-grow"
+          :disabled="serialStore.hasConnection"
+          :options="serialStore.pairedDevicesOptions"
+          placeholder="Select device"
+        />
+        <UButton
+          size="2xs"
+          class="mt-2 mr-auto"
+          @click="requestSerialDevices"
+        >
+          Port select
+        </UButton>
+      </div>
+      <div class="flex flex-col">
         <USelectMenu
           v-model="baudrate"
           class="flex-grow"
           :disabled="serialStore.selectedDevice.id === '-1' || serialStore.hasConnection || isDirectConnectDevice"
           :options="baudrateOptions"
         />
-      </div>
-      <div class="flex justify-between gap-2">
-        <UButton size="2xs" @click="requestSerialDevices">
-          Port select
-        </UButton>
-        <UButton v-if="!serialStore.hasConnection" :disabled="serialStore.selectedDevice.id === '-1'" size="2xs" @click="connectToDevice">
+        <UButton
+          v-if="!serialStore.hasConnection"
+          :disabled="serialStore.selectedDevice.id === '-1'"
+          size="2xs"
+          class="mt-2 mr-auto 2xl:ml-auto 2xl:mr-0"
+          @click="connectToDevice"
+        >
           Connect
         </UButton>
-        <UButton v-else size="2xs" color="red" @click="disconnectFromDevice">
+        <UButton
+          v-else
+          size="2xs"
+          class="mt-2 mr-auto 2xl:ml-auto 2xl:mr-0"
+          color="red"
+          @click="disconnectFromDevice"
+        >
           Disconnect
         </UButton>
       </div>

From ea5aa2a1b9e7a32ba1ea9e66da0e9791a19c1ed1 Mon Sep 17 00:00:00 2001
From: Sebastian Wachter <sebastian.wachter@breuninger.de>
Date: Sun, 30 Jun 2024 16:54:15 +0200
Subject: [PATCH 3/3] Adjust read/save buttons to fit to grid + responsivy
 read/save buttons and esc count.

---
 components/SerialDevice.vue | 32 ++++++++++++++++----------------
 tailwind.config.ts          |  4 ++++
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/components/SerialDevice.vue b/components/SerialDevice.vue
index e141b9b..04aefa3 100644
--- a/components/SerialDevice.vue
+++ b/components/SerialDevice.vue
@@ -43,7 +43,7 @@
           Disconnect
         </UButton>
       </div>
-      <div class="flex gap-4 pt-2">
+      <div class="flex flex-col mb-auto ml:flex-row gap-4 pt-2">
         <div class="flex gap-2 items-center">
           <UIcon name="i-fluent-serial-port-16-filled" dynamic :class="[serialStore.hasConnection ? 'text-green-500' : 'text-red-500']" />
         </div>
@@ -68,23 +68,23 @@
               />
             </UChip>
           </div>
-          <div class="flex gap-2">
-            <UButton v-if="!serialStore.isDirectConnect" icon="i-material-symbols-find-in-page-outline" size="2xs" :loading="escStore.isLoading" @click="connectToEsc">
-              Read
-            </UButton>
-            <UButton
-              icon="i-material-symbols-save"
-              color="blue"
-              size="2xs"
-              :disabled="!isAnySettingsDirty || escStore.isSaving"
-              :loading="escStore.isSaving"
-              @click="writeConfig"
-            >
-              Save
-            </UButton>
-          </div>
         </div>
       </div>
+      <div class="flex flex-col mr-auto ml:flex-row ml:mr-0 2xl:flex-col 2xl:ml-auto 3xl:flex-row 3xl:justify-end gap-2">
+        <UButton v-if="!serialStore.isDirectConnect" icon="i-material-symbols-find-in-page-outline" size="2xs" :loading="escStore.isLoading" @click="connectToEsc">
+          Read
+        </UButton>
+        <UButton
+          icon="i-material-symbols-save"
+          color="blue"
+          size="2xs"
+          :disabled="!isAnySettingsDirty || escStore.isSaving"
+          :loading="escStore.isSaving"
+          @click="writeConfig"
+        >
+          Save
+        </UButton>
+      </div>
       <div v-if="false && serialStore.hasConnection && serialStore.mspData.type" class="flex gap-1">
         <UKbd>
           {{ serialStore.mspData.type }}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dfa3125..e111916 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,10 @@ export default {
     content: [],
     theme: {
         extend: {
+            screens: {
+                ml: '994px',
+                '3xl': '1855px'
+            }
         },
         fontFamily: {
             sans: ["'Nunito Sans'"]