fix(ui): hanging border when using bg header

- focus not found issue
- save shortcut in Settings

src/components/PageHeader.vue

@@ -10,10 +10,13 @@
       <div
         v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
         class="h-full"
-        :class="showSidebar ? '' : 'w-tl me-4 border-e'"
+        :class="spacerClass"
       />
     </Transition>
-    <h1 class="text-xl font-semibold select-none" v-if="title">
+    <h1
+      class="text-xl font-semibold select-none whitespace-nowrap"
+      v-if="title"
+    >
       {{ title }}
     </h1>
     <div class="flex items-stretch window-no-drag gap-2">
@@ -53,6 +56,17 @@ export default defineComponent({
     showBorder() {
       return !!this.$slots.default && this.searchborder;
     },
+    spacerClass() {
+      if (this.showSidebar) {
+        return '';
+      }
+
+      if (this.border) {
+        return 'w-tl me-4 border-e';
+      }
+
+      return 'w-tl me-4';
+    },
   },
 });
 </script>

src/components/SearchBar.vue

@@ -305,7 +305,7 @@ export default defineComponent({
       this.searcher?.updateKeywords();
 
       nextTick(() => {
-        (this.$refs.input as HTMLInputElement).focus();
+        (this.$refs.input as HTMLInputElement)?.focus();
       });
     },
     close(): void {

src/pages/Settings/Settings.vue

@@ -78,16 +78,24 @@ import FormHeader from 'src/components/FormHeader.vue';
 import { handleErrorWithDialog } from 'src/errorHandling';
 import { getErrorMessage } from 'src/utils';
 import { evaluateHidden } from 'src/utils/doc';
+import { showToast } from 'src/utils/interactive';
 import { reloadWindow } from 'src/utils/ipcCalls';
 import { docsPathMap } from 'src/utils/misc';
 import { docsPathRef } from 'src/utils/refs';
 import { UIGroupedFields } from 'src/utils/types';
-import { showToast } from 'src/utils/interactive';
+import { computed, defineComponent, inject } from 'vue';
-import { computed, defineComponent } from 'vue';
 import CommonFormSection from '../CommonForm/CommonFormSection.vue';
+import { shortcutsKey } from 'src/utils/injectionKeys';
+
+const COMPONENT_NAME = 'Settings';
 
 export default defineComponent({
   components: { FormContainer, Button, FormHeader, CommonFormSection },
+  setup() {
+    return {
+      shortcuts: inject(shortcutsKey),
+    };
+  },
   data() {
     return {
       errors: {},
@@ -119,10 +127,17 @@ export default defineComponent({
     }
 
     docsPathRef.value = docsPathMap.Settings ?? '';
+    this.shortcuts?.pmod.set(COMPONENT_NAME, ['KeyS'], () => {
+      if (!this.canSave) {
+        return;
+      }
+
+      this.sync();
+    });
   },
   async deactivated(): Promise<void> {
     docsPathRef.value = '';
-
+    this.shortcuts?.delete(COMPONENT_NAME);
     if (!this.canSave) {
       return;
     }