Some basic tweaks to the mobile UI.

Shared (Extension)/Resources/options.css

@@ -8,7 +8,7 @@
     @apply bg-fuchsia-900 hover:bg-fuchsia-800  active:bg-fuchsia-700 text-fuchsia-200 disabled:bg-gray-200 disabled:text-black;
 
     /* Sizing and padding */
-    @apply rounded-lg p-1 md:p-1.5  md:w-24 min-w-fit text-center;
+    @apply rounded-lg p-1.5 md:w-24 min-w-fit text-center;
   }
 
   .input {
@@ -16,7 +16,7 @@
     @apply bg-fuchsia-200 text-fuchsia-800 disabled:bg-gray-200 disabled:text-black focus:border-fuchsia-800;
 
     /* Sizing and padding */
-    @apply rounded-lg p-1 lg:p-1.5  w-full md:w-64;
+    @apply rounded-lg p-1.5 lg:p-1.5  w-full md:w-64;
   }
 
   .checkbox {

Shared (Extension)/Resources/popup.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <link rel="stylesheet" href="popup.css">
+    <link rel="stylesheet" href="options.build.css">
     <script defer src="popup.build.js"></script>
 </head>
 
@@ -12,7 +13,7 @@
     <div class="profiles">
         <label for="profile">Active Profile</label>
         <div class="profile-buttons">
-            <select x-model.number="profileIndex" name="profile" id="profile">
+            <select x-model.number="profileIndex" name="profile" id="profile" class="input">
                 <template x-for="(prof, index) in profileNames" :key="index">
                     <option x-text="prof" :value="index"></option>
                 </template>
@@ -30,7 +31,7 @@
     </div>
 
     <div class="help">
-        <button @click="await openOptions()">Settings</button>
+        <button class="button p-1.5" @click="await openOptions()">Settings</button>
     </div>
 
     <div class="disclaimer">

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./Shared (Extension)/**/*.{html,js}'],
+    content: ['./Shared*/**/*.{html,js}'],
     theme: {
         extend: {},
     },