Lint files

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false
-}

prettier.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('prettier-plugin-tailwindcss')],
+}

src/App.tsx

@@ -19,7 +19,7 @@ export const App = (): JSX.Element => {
   const device = getDevice(selectedDevice);
 
   return (
-    <div className="h-full flex w-full">
+    <div className="flex h-full w-full">
       <DeviceSelector />
 
       {device && (

src/DeviceWrapper.tsx

@@ -1,7 +1,7 @@
-import type React from 'react';
+import type React from "react";
 
-import { DeviceContext } from '@core/providers/useDevice.js';
+import { DeviceContext } from "@core/providers/useDevice.js";
-import type { Device } from '@core/stores/deviceStore.js';
+import type { Device } from "@core/stores/deviceStore.js";
 
 export interface DeviceProps {
   children: React.ReactNode;

src/components/Button.tsx

@@ -19,7 +19,7 @@ export const Button = ({
 }: ButtonProps): JSX.Element => {
   return (
     <button
-      className={`px-3 w-full rounded-md flex border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
+      className={`flex w-full rounded-md border border-transparent px-3 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
         variant === "primary"
           ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
           : "bg-orange-100 text-orange-700 hover:bg-orange-200"
@@ -33,7 +33,7 @@ export const Button = ({
       disabled={disabled}
       {...rest}
     >
-      <div className="flex items-center m-auto gap-2 font-medium">
+      <div className="m-auto flex items-center gap-2 font-medium">
         {iconBefore}
         {children}
         {iconAfter}

src/components/DeviceSelector.tsx

@@ -10,7 +10,7 @@ export const DeviceSelector = (): JSX.Element => {
   const { selectedDevice, setSelectedDevice } = useAppStore();
 
   return (
-    <div className="flex bg-slate-50 w-16 items-center whitespace-nowrap py-12 text-sm [writing-mode:vertical-rl] h-full">
+    <div className="flex h-full w-16 items-center whitespace-nowrap bg-slate-50 py-12 text-sm [writing-mode:vertical-rl]">
       <span className="font-mono text-slate-500">Connected Devices</span>
       <span className="mt-6 flex gap-4 font-bold text-slate-900">
         {getDevices().map((device) => (
@@ -19,11 +19,11 @@ export const DeviceSelector = (): JSX.Element => {
             onClick={() => {
               setSelectedDevice(device.id);
             }}
-            className="group flex w-8 h-8 p-0.5 cursor-pointer drop-shadow-md"
+            className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
           >
             <Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
             <div
-              className={`absolute -left-1.5 w-0.5 h-7 rounded-full group-hover:bg-orange-300 ${
+              className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-orange-300 ${
                 device.id === selectedDevice
                   ? "bg-orange-400"
                   : "bg-transparent"
@@ -35,14 +35,14 @@ export const DeviceSelector = (): JSX.Element => {
           onClick={() => {
             setSelectedDevice(0);
           }}
-          className={`w-8 h-8 p-2 border-dashed border-2 rounded-md hover:border-orange-300 cursor-pointer ${
+          className={`h-8 w-8 cursor-pointer rounded-md border-2 border-dashed p-2 hover:border-orange-300 ${
             selectedDevice === 0 ? "border-orange-400" : "border-slate-200"
           }`}
         >
           <PlusIcon />
         </div>
       </span>
-      <img src="Logo_Black.svg" className="px-3 mt-auto" />
+      <img src="Logo_Black.svg" className="mt-auto px-3" />
     </div>
   );
 };

src/components/Dialog/QRDialog.tsx

@@ -58,7 +58,7 @@ export const QRDialog = ({
           </Dialog.Description>
           <div className="flex">
             <div className="flex flex-col">
-              <span className="font-medium text-lg">Channels to include</span>
+              <span className="text-lg font-medium">Channels to include</span>
               <span className="text-sm text-slate-600">
                 The current LoRa configuration will also be shared.
               </span>
@@ -86,8 +86,8 @@ export const QRDialog = ({
                 />
               ))}
             </div>
-            <div className="flex flex-col flex-grow m-2">
+            <div className="m-2 flex flex-grow flex-col">
-              <div className="flex m-auto">
+              <div className="m-auto flex">
                 <QRCode value={QRCodeURL} size={250} qrStyle="dots" />
               </div>
               <div className="flex gap-2">

src/components/IconButton.tsx

@@ -17,7 +17,7 @@ export const IconButton = ({
 }: IconButtonProps): JSX.Element => {
   return (
     <button
-      className={`flex border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
+      className={`flex rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
         variant === "primary"
           ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
           : "bg-orange-100 text-orange-700 hover:bg-orange-200"

src/components/NewDevice.tsx

@@ -27,7 +27,7 @@ export const NewDevice = () => {
   ];
 
   return (
-    <div className="w-96 h-96 m-auto">
+    <div className="m-auto h-96 w-96">
       <TabbedContent tabs={tabs} />
     </div>
   );

src/components/PageComponents/Connect/BLE.tsx

@@ -35,8 +35,8 @@ export const BLE = (): JSX.Element => {
   };
 
   return (
-    <div className="flex flex-col p-4 gap-2 w-full">
+    <div className="flex w-full flex-col gap-2 p-4">
-      <div className="flex gap-2 flex-col h-48 overflow-y-auto">
+      <div className="flex h-48 flex-col gap-2 overflow-y-auto">
         {bleDevices.map((device, index) => (
           <Button
             key={index}

src/components/PageComponents/Connect/HTTP.tsx

@@ -48,8 +48,8 @@ export const HTTP = (): JSX.Element => {
 
   return (
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    <form className="w-full p-4 gap-2 flex flex-col" onSubmit={onSubmit}>
+    <form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
-      <div className="h-48 flex flex-col gap-2">
+      <div className="flex h-48 flex-col gap-2">
         <Input
           label="IP Address/Hostname"
           prefix={TLSEnabled ? "https://" : "http://"}

src/components/PageComponents/Connect/Serial.tsx

@@ -46,8 +46,8 @@ export const Serial = (): JSX.Element => {
   };
 
   return (
-    <div className="flex flex-col p-4 gap-2 w-full">
+    <div className="flex w-full flex-col gap-2 p-4">
-      <div className="flex gap-2 flex-col h-48 overflow-y-auto">
+      <div className="flex h-48 flex-col gap-2 overflow-y-auto">
         {serialPorts.map((port, index) => (
           <Button
             key={index}

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -31,8 +31,8 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
   };
 
   return (
-    <div className="flex flex-col flex-grow">
+    <div className="flex flex-grow flex-col">
-      <div className="flex flex-col flex-grow">
+      <div className="flex flex-grow flex-col">
         {channel.messages.map((message, index) => (
           <Message
             key={index}

src/components/PageComponents/Messages/Message.tsx

@@ -29,17 +29,17 @@ export const Message = ({
   };
 
   return lastMsgSameUser ? (
-    <div className="flex ml-4">
+    <div className="ml-4 flex">
       {message.ack ? (
-        <CheckCircleIcon className="my-auto text-slate-200 h-4" />
+        <CheckCircleIcon className="my-auto h-4 text-slate-200" />
       ) : (
-        <EllipsisHorizontalCircleIcon className="my-auto text-slate-200 h-4" />
+        <EllipsisHorizontalCircleIcon className="my-auto h-4 text-slate-200" />
       )}
       {"waypointID" in message ? (
         <WaypointMessage waypointID={message.waypointID} />
       ) : (
         <span
-          className={`ml-4 pl-2 border-l-2 border-l-slate-200 ${
+          className={`ml-4 border-l-2 border-l-slate-200 pl-2 ${
             message.ack ? "text-black" : "text-slate-500"
           }`}
         >
@@ -48,9 +48,9 @@ export const Message = ({
       )}
     </div>
   ) : (
-    <div className="mx-4 gap-2 mt-2">
+    <div className="mx-4 mt-2 gap-2">
       <div className="flex gap-2">
-        <div className="cursor-pointer w-6" onClick={openPeer}>
+        <div className="w-6 cursor-pointer" onClick={openPeer}>
           <Hashicon value={(sender?.num ?? 0).toString()} size={32} />
         </div>
         <span
@@ -68,15 +68,15 @@ export const Message = ({
       </div>
       <div className="flex">
         {message.ack ? (
-          <CheckCircleIcon className="my-auto text-slate-200 h-4" />
+          <CheckCircleIcon className="my-auto h-4 text-slate-200" />
         ) : (
-          <EllipsisHorizontalCircleIcon className="my-auto text-slate-200 h-4" />
+          <EllipsisHorizontalCircleIcon className="my-auto h-4 text-slate-200" />
         )}
         {"waypointID" in message ? (
           <WaypointMessage waypointID={message.waypointID} />
         ) : (
           <span
-            className={`ml-4 pl-2 border-l-2 border-l-slate-200 ${
+            className={`ml-4 border-l-2 border-l-slate-200 pl-2 ${
               message.ack ? "text-black" : "text-slate-500"
             }`}
           >

src/components/PageComponents/Messages/NewLocationMessage.tsx

@@ -17,7 +17,7 @@ export const NewLocationMessage = (): JSX.Element => {
   const { connection } = useDevice();
 
   return (
-    <div className="w-96 m-4">
+    <div className="m-4 w-96">
       <form
         onSubmit={(e): void => {
           e.preventDefault();

src/components/PageComponents/Messages/WaypointMessage.tsx

@@ -15,13 +15,13 @@ export const WaypointMessage = ({
   const waypoint = waypoints.find((wp) => wp.id === waypointID);
 
   return (
-    <div className="ml-4 pl-2 border-l-slate-200 border-l-2">
+    <div className="ml-4 border-l-2 border-l-slate-200 pl-2">
-      <div className="gap-2 flex rounded-md p-2 shadow-md shadow-orange-300">
+      <div className="flex gap-2 rounded-md p-2 shadow-md shadow-orange-300">
         <MapPinIcon className="m-auto w-6 text-slate-600" />
         <div>
           <div className="flex gap-2">
             <div className="font-bold">{waypoint?.name}</div>
-            <span className="text-sm font-mono text-slate-500">
+            <span className="font-mono text-sm text-slate-500">
               {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
             </span>
           </div>

src/components/PageNav.tsx

@@ -54,7 +54,7 @@ export const PageNav = (): JSX.Element => {
   ];
 
   return (
-    <div className="flex bg-slate-50 w-12 items-center whitespace-nowrap py-4 text-sm [writing-mode:vertical-rl] h-full border-r border-slate-200 flex-shrink-0">
+    <div className="flex h-full w-12 flex-shrink-0 items-center whitespace-nowrap border-r border-slate-200 bg-slate-50 py-4 text-sm [writing-mode:vertical-rl]">
       <span className="mt-6 flex gap-4 font-bold text-slate-500">
         {pages.map((Link) => (
           <div
@@ -62,7 +62,7 @@ export const PageNav = (): JSX.Element => {
             onClick={() => {
               setActivePage(Link.page);
             }}
-            className={`w-8 h-8 p-1 border-2 rounded-md hover:border-orange-300 cursor-pointer ${
+            className={`h-8 w-8 cursor-pointer rounded-md border-2 p-1 hover:border-orange-300 ${
               Link.page === activePage
                 ? "border-orange-400"
                 : "border-slate-200"

src/components/Sidebar.tsx

@@ -17,7 +17,7 @@ export const Sidebar = (): JSX.Element => {
   const { selectedDevice, setSelectedDevice } = useAppStore();
 
   return (
-    <div className="flex flex-col relative bg-slate-50 w-80 p-2 border-x border-slate-200 gap-2 flex-shrink-0">
+    <div className="relative flex w-80 flex-shrink-0 flex-col gap-2 border-x border-slate-200 bg-slate-50 p-2">
       <DeviceWidget
         name={
           nodes.find((n) => n.data.num === hardware.myNodeNum)?.data.user
@@ -55,7 +55,7 @@ export const Sidebar = (): JSX.Element => {
           <dl className="mt-2 divide-y divide-gray-200 border-t border-b border-gray-200">
             <div className="flex justify-between py-3 text-sm font-medium">
               <dt className="text-gray-500">Firmware version</dt>
-              <dd className="whitespace-nowrap text-gray-900 hover:underline hover:text-orange-400 cursor-pointer">
+              <dd className="cursor-pointer whitespace-nowrap text-gray-900 hover:text-orange-400 hover:underline">
                 {hardware.firmwareVersion}
               </dd>
             </div>
@@ -64,7 +64,7 @@ export const Sidebar = (): JSX.Element => {
             <dt className="text-gray-500">Bitrate</dt>
             <dd className="whitespace-nowrap text-gray-900">
               {hardware.bitrate.toFixed(2)}
-              <span className="font-mono text-slate-500 text-sm ">bps</span>
+              <span className="font-mono text-sm text-slate-500 ">bps</span>
             </dd>
           </div>
         </div>

src/components/Widgets/ConfiguringWidget.tsx

@@ -32,9 +32,9 @@ export const ConfiguringWidget = (): JSX.Element => {
   ]);
 
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       <p className="text-xl font-bold">Connecting to device</p>
-      <ol className="flex flex-col overflow-hidden gap-3">
+      <ol className="flex flex-col gap-3 overflow-hidden">
         <StatusIndicator
           title="Device Info"
           current={hardware.myNodeNum ? 1 : 0}
@@ -58,7 +58,7 @@ export const ConfiguringWidget = (): JSX.Element => {
         />
       </ol>
       <div
-        className="mt-2 rounded-md bg-[#dabb6b] p-1 ring-[#f9e3aa]  cursor-pointer text-center"
+        className="mt-2 cursor-pointer rounded-md bg-[#dabb6b] p-1  text-center ring-[#f9e3aa]"
         onClick={() => {
           void connection?.configure();
         }}
@@ -89,12 +89,12 @@ const StatusIndicator = ({
       />
       <div className="flex">
         <div
-          className={`flex relative z-10 h-5 w-5 rounded-full border-2  ${
+          className={`relative z-10 flex h-5 w-5 rounded-full border-2  ${
             current === 0
               ? "border-[#dabb6b] bg-[#f9e3aa]"
               : current >= total
-              ? "bg-green-500 border-green-500"
+              ? "border-green-500 bg-green-500"
-              : "bg-[#f9e3aa] border-green-500"
+              : "border-green-500 bg-[#f9e3aa]"
           }`}
         >
           <span
@@ -104,7 +104,7 @@ const StatusIndicator = ({
           />
         </div>
 
-        <span className="flex text-sm ml-4 gap-1">
+        <span className="ml-4 flex gap-1 text-sm">
           <span className="font-medium">{title}</span>
           <span className="font-mono text-slate-500">
             ({current}

src/components/Widgets/DeviceWidget.tsx

@@ -21,19 +21,19 @@ export const DeviceWidget = ({
   reconnect,
 }: DeviceWidgetProps): JSX.Element => {
   return (
-    <div className="relative rounded-xl bg-emerald-400 overflow-hidden">
+    <div className="relative overflow-hidden rounded-xl bg-emerald-400">
-      <div className="absolute w-full h-full bottom-20">
+      <div className="absolute bottom-20 h-full w-full">
         <Hashicon size={350} value={nodeNum} />
       </div>
-      <div className="flex backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30 p-3">
+      <div className="flex p-3 backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30">
         <div className="drop-shadow-md">
           <Hashicon size={96} value={nodeNum} />
         </div>
-        <div className="w-full flex flex-col">
+        <div className="flex w-full flex-col">
-          <span className="font-bold text-slate-200 ml-auto text-xl whitespace-nowrap">
+          <span className="ml-auto whitespace-nowrap text-xl font-bold text-slate-200">
             {name}
           </span>
-          <div className="ml-auto my-auto">
+          <div className="my-auto ml-auto">
             <Button
               onClick={disconnected ? reconnect : disconnect}
               variant={disconnected ? "secondary" : "primary"}

src/components/Widgets/NodeInfoWidget.tsx

@@ -4,7 +4,7 @@ export interface NodeInfoWidgetProps {}
 
 export const NodeInfoWidget = ({}: NodeInfoWidgetProps): JSX.Element => {
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       node info
     </div>
   );

src/components/Widgets/PeersWidget.tsx

@@ -4,7 +4,7 @@ export interface PeersWidgetProps {}
 
 export const PeersWidget = ({}: PeersWidgetProps): JSX.Element => {
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       Peers
     </div>
   );

src/components/Widgets/PositionWidget.tsx

@@ -4,7 +4,7 @@ export interface PositionWidgetProps {}
 
 export const PositionWidget = ({}: PositionWidgetProps): JSX.Element => {
   return (
-    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
       position
     </div>
   );

src/components/form/Form.tsx

@@ -34,29 +34,29 @@ export const Form = ({
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     <form className="w-full" onSubmit={onSubmit} {...props}>
       {loading && (
-        <div className="absolute flex w-full h-full bg-slate-600 rounded-md z-10">
+        <div className="absolute z-10 flex h-full w-full rounded-md bg-slate-600">
-          <ArrowPathIcon className="h-8 animate-spin m-auto" />
+          <ArrowPathIcon className="m-auto h-8 animate-spin" />
         </div>
       )}
-      <div className="select-none rounded-md p-4 bg-gray-700">
+      <div className="select-none rounded-md bg-gray-700 p-4">
         <ol className="flex gap-4">
-          <li className="text-gray-400 hover:text-gray-200 cursor-pointer">
+          <li className="cursor-pointer text-gray-400 hover:text-gray-200">
             <HomeIcon className="h-5 w-5 flex-shrink-0 text-gray-400" />
           </li>
           {breadcrumbs.map((breadcrumb, index) => (
             <li key={index} className="flex gap-4">
               <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-500" />
-              <span className="text-sm font-medium text-gray-400 hover:text-gray-200 cursor-pointer">
+              <span className="cursor-pointer text-sm font-medium text-gray-400 hover:text-gray-200">
                 {breadcrumb}
               </span>
             </li>
           ))}
         </ol>
         <div className="mt-2 flex items-center">
-          <h2 className="font-bold text-white truncate text-3xl tracking-tight">
+          <h2 className="truncate text-3xl font-bold tracking-tight text-white">
             {title}
           </h2>
-          <div className="flex gap-2 ml-auto">
+          <div className="ml-auto flex gap-2">
             <Button
               type="button"
               onClick={() => {
@@ -73,7 +73,7 @@ export const Form = ({
           </div>
         </div>
       </div>
-      <div className="flex flex-col p-2 gap-3">{children}</div>
+      <div className="flex flex-col gap-3 p-2">{children}</div>
     </form>
   );
 };

src/components/form/Input.tsx

@@ -32,7 +32,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         )}
         <input
           ref={ref}
-          className={`block w-full min-w-0 flex-1 rounded-md border border-gray-300 px-3 h-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${
+          className={`block h-10 w-full min-w-0 flex-1 rounded-md border border-gray-300 px-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${
             prefix ? "rounded-l-none" : ""
           } ${action ? "rounded-r-none" : ""}`}
           {...rest}

src/components/layout/page/TabbedContent.tsx

@@ -20,13 +20,13 @@ export const TabbedContent = ({
   actions,
 }: TabbedContentProps): JSX.Element => {
   return (
-    <Tab.Group as="div" className="flex flex-col gap-2 p-4 flex-grow">
+    <Tab.Group as="div" className="flex flex-grow flex-col gap-2 p-4">
       <Tab.List className="flex gap-4 border-b pb-3">
         {tabs.map((entry, index) => (
           <Tab key={index}>
             {({ selected }) => (
               <div
-                className={`flex gap-3 h-10 font-medium text-sm rounded-md cursor-pointer px-3 ${
+                className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${
                   selected
                     ? "bg-gray-100 text-gray-700"
                     : "text-gray-500 hover:text-gray-700"

src/core/providers/useDevice.ts

@@ -1,6 +1,6 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
 
-import type { Device } from '@core/stores/deviceStore.js';
+import type { Device } from "@core/stores/deviceStore.js";
 
 export const DeviceContext = createContext<Device | undefined>(undefined);
 

src/core/stores/appStore.ts

@@ -1,4 +1,4 @@
-import create from 'zustand';
+import create from "zustand";
 
 interface AppState {
   selectedDevice: number;

src/pages/Config/AppConfig.tsx

@@ -23,13 +23,13 @@ export const AppConfig = (): JSX.Element => {
   ];
 
   return (
-    <Tab.Group as="div" className="flex gap-3 w-full">
+    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex flex-col w-44 gap-1">
+      <Tab.List className="flex w-44 flex-col gap-1">
         {configSections.map((Config, index) => (
           <Tab key={index} as={Fragment}>
             {({ selected }) => (
               <div
-                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
                   selected
                     ? "bg-gray-100 text-gray-900"
                     : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"

src/pages/Config/DeviceConfig.tsx

@@ -52,13 +52,13 @@ export const DeviceConfig = (): JSX.Element => {
   ];
 
   return (
-    <Tab.Group as="div" className="flex gap-3 w-full">
+    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex flex-col w-44 gap-1">
+      <Tab.List className="flex w-44 flex-col gap-1">
         {configSections.map((Config, index) => (
           <Tab key={index} as={Fragment}>
             {({ selected }) => (
               <div
-                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
                   selected
                     ? "bg-gray-100 text-gray-900"
                     : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"

src/pages/Config/ModuleConfig.tsx

@@ -45,13 +45,13 @@ export const ModuleConfig = (): JSX.Element => {
   ];
 
   return (
-    <Tab.Group as="div" className="flex gap-3 w-full">
+    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex flex-col gap-1 w-44">
+      <Tab.List className="flex w-44 flex-col gap-1">
         {configSections.map((Config, index) => (
           <Tab key={index} as={Fragment}>
             {({ selected }) => (
               <div
-                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
                   selected
                     ? "bg-gray-100 text-gray-900"
                     : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"

src/pages/Map.tsx

@@ -14,8 +14,8 @@ export const MapPage = (): JSX.Element => {
 
   return (
     <div className="flex-grow">
-      <div className="absolute z-10 right-0 top-0 m-2 rounded-md p-2 shadow-md bg-white">
+      <div className="absolute right-0 top-0 z-10 m-2 rounded-md bg-white p-2 shadow-md">
-        <div className="font-medium text-lg p-1">Title</div>
+        <div className="p-1 text-lg font-medium">Title</div>
         <div className="flex flex-col gap-2">
           {nodes.map((n) => (
             <div key={n.data.num} className="flex gap-2">

src/pages/Messages.tsx

@@ -35,7 +35,7 @@ export const MessagesPage = (): JSX.Element => {
   });
 
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex w-full flex-col">
       <TabbedContent
         tabs={tabs}
         actions={[

src/validation/config/device.ts

@@ -1,6 +1,6 @@
-import { IsBoolean, IsEnum } from 'class-validator';
+import { IsBoolean, IsEnum } from "class-validator";
 
-import { Protobuf } from '@meshtastic/meshtasticjs';
+import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export class DeviceValidation implements Protobuf.Config_DeviceConfig {
   @IsEnum(Protobuf.Config_DeviceConfig_Role)

src/validation/config/position.ts

@@ -1,6 +1,6 @@
-import { IsBoolean, IsInt } from 'class-validator';
+import { IsBoolean, IsInt } from "class-validator";
 
-import type { Protobuf } from '@meshtastic/meshtasticjs';
+import type { Protobuf } from "@meshtastic/meshtasticjs";
 
 export class PositionValidation implements Protobuf.Config_PositionConfig {
   @IsInt()