FIX: Profile name button submit

src/components/Navbar.vue

@@ -14,7 +14,7 @@
         <p class="text-xs text-muted-foreground">
           <ScrambleText
             ref="zerooneSubtitle"
-            text="Haptic Configuration Tool" scramble-on-mount :scramble-amount="1" :fill-interval="35"
+            text="Haptics Configurator" scramble-on-mount :scramble-amount="1" :fill-interval="35"
             :replace-interval="40" />
         </p>
       </div>

src/components/device/DevicePreview.vue

@@ -9,7 +9,7 @@
       <div
         class="flex bg-cover mb-6 w-72 aspect-square"
         style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
-        <div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
+        <div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
           <div class="self-center w-8 mb-1 opacity-50">
             <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
           </div>
@@ -18,7 +18,7 @@
           <DeviceBar class="self-center" />
           <span
             class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
-            Profile description will go here!
+            Profile description will go here! And hopefully it will be a long one! Much longer than this one! Actually, this is probably long enough. I don't think we need to make it any longer...
           </span>
         </div>
       </div>

src/components/profile/ProfileButton.vue

@@ -21,8 +21,9 @@
         class="flex-1 pl-1 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
         :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
         'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
-        @blur="editing=false">
+        @blur="onNameInputBlur">
       <button
+        ref="nameSubmitButton"
         type="submit"
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
@@ -104,6 +105,8 @@ import { nextTick, ref } from 'vue'
 
 defineEmits(['select', 'duplicate', 'delete'])
 
+const nameSubmitButton = ref(null)
+
 const profile = defineModel({
   type: Object,
   required: true,
@@ -143,6 +146,11 @@ async function startEditing() {
   profileNameInput.value.focus()
 }
 
+function onNameInputBlur(e) {
+  if (e.relatedTarget === nameSubmitButton.value) return
+  editing.value = false
+}
+
 const profileNameInput = ref(null)
 
 const nameInput = ref(profile.value.name)