fix: back button overlap on macOS

Voxelum · Jun 18, 2023 · b276401 · b276401
1 parent 885739b
commit b276401
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/xmcl-keystone-ui/src/composables/windowStyle.ts b/xmcl-keystone-ui/src/composables/windowStyle.ts
@@ -11,7 +11,9 @@ export function useWindowStyle() {
     maximized.value = v
   })
   const hideWindowControl = computed(() => state.platform.name === 'osx' || (state.platform.name === 'linux' && state.linuxTitlebar))
+  const shouldShiftBackControl = computed(() => state.platform.name === 'osx')
   return {
+    shouldShiftBackControl,
     hideWindowControl,
   }
 }
diff --git a/xmcl-keystone-ui/src/views/AppSystemBar.vue b/xmcl-keystone-ui/src/views/AppSystemBar.vue
@@ -10,6 +10,10 @@
       v-if="back"
       class="p-0 flex flex-shrink flex-grow-0"
     >
+      <div
+        v-if="shouldShiftBackControl"
+        style="width: 80px"
+      />
       <v-icon
         v-ripple
         small
@@ -101,7 +105,7 @@ defineProps<{
 const { appBarColor } = injection(kColorTheme)
 const { blurAppBar } = useBarBlur()
 const { maximize, minimize, close } = windowController
-const { hideWindowControl } = useWindowStyle()
+const { shouldShiftBackControl, hideWindowControl } = useWindowStyle()
 const { show: showFeedbackDialog } = useDialog('feedback')
 const { show: showTaskDialog } = useDialog('task')
 const { t } = useI18n()