make the query name input field automatically adjust its width to match the text length

src/views/desktop/insights/tabs/ExploreQueryTab.vue

@@ -15,13 +15,16 @@
             <v-card border class="card-title-with-bg mt-4">
                 <v-card-title class="d-flex align-center py-2 px-5">
                     <v-icon :icon="mdiTextBoxSearchOutline" size="20" />
-                    <span class="text-subtitle-1 ms-2" v-if="editingQuery !== query">{{ query.name || `${tt('Query')} #${queryIndex + 1}` }}</span>
+                    <span class="query-name text-subtitle-1 ms-2" v-if="editingQuery !== query">{{ query.name || `${tt('Query')} #${queryIndex + 1}` }}</span>
                     <div class="query-name-edit ms-2" v-if="editingQuery === query">
-                        <v-text-field type="text" density="compact" variant="underlined"
+                        <v-text-field autofocus type="text" density="compact" variant="underlined"
                                       :disabled="loading"
                                       :placeholder="`${tt('Query')} #${queryIndex + 1}`"
+                                      v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${queryIndex + 1}` }"
                                       v-model="editingQueryName"
+                                      @keyup.esc="cancelUpdateQueryName"
                                       @keyup.enter="updateQueryName(query)" />
+                        <span :id="`query-name-aux-span-${queryIndex + 1}`" />
                     </div>
                     <v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
                            :icon="true" :disabled="loading"
@@ -683,8 +686,11 @@ if (queries.value.length === 0) {
 </script>
 
 <style>
+.query-name {
+    white-space: pre;
+}
+
 .query-name-edit {
-    width: 200px;
     height: 36px;
 
     > .v-text-field {