feat: fix bugs with layout + window controls (#5855)

apps/app-frontend/src/App.vue

@@ -1468,6 +1468,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 
 .app-grid-statusbar {
 	grid-area: status;
+	padding-right: var(--window-controls-width, 0px);
 }
 
 [data-tauri-drag-region-exclude] {

apps/app-frontend/src/components/ui/WindowControls.vue

@@ -1,9 +1,5 @@
 <template>
-	<section
-		v-if="!nativeDecorations && os !== 'MacOS'"
-		class="window-controls"
-		data-tauri-drag-region-exclude
-	>
+	<section v-if="showControls" class="window-controls" data-tauri-drag-region-exclude>
 		<ButtonStyled type="transparent" circular>
 			<button class="titlebar-button" @click="() => getCurrentWindow().minimize()">
 				<MinimizeIcon />
@@ -28,18 +24,35 @@ import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets
 import { ButtonStyled } from '@modrinth/ui'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { get as getSettings } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils.js'
 
+const WINDOW_CONTROLS_WIDTH = '8rem'
+
 const nativeDecorations = ref(true)
 const isMaximized = ref(false)
 const os = ref('')
 
+const showControls = computed(() => !nativeDecorations.value && os.value !== 'MacOS')
+watch(
+	showControls,
+	(visible) => {
+		if (typeof document === 'undefined') return
+		if (visible) {
+			document.documentElement.style.setProperty('--window-controls-width', WINDOW_CONTROLS_WIDTH)
+		} else {
+			document.documentElement.style.removeProperty('--window-controls-width')
+		}
+	},
+	{ immediate: true },
+)
+
 onMounted(async () => {
 	os.value = await getOS()
 
-	const settings = await import('@/helpers/settings.ts').then((m) => m.get())
+	const settings = await getSettings()
 	nativeDecorations.value = settings.native_decorations
 
 	if (os.value !== 'MacOS') {
@@ -54,6 +67,7 @@ onMounted(async () => {
 
 	onUnmounted(() => {
 		unlisten()
+		document.documentElement.style.removeProperty('--window-controls-width')
 	})
 })
 

packages/ui/src/components/base/FloatingActionBar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import { useModalStack } from '../../composables/modal-stack'
 
 const props = defineProps<{
 	shown: boolean
@@ -9,6 +11,9 @@ const props = defineProps<{
 const toolbarEl = ref<HTMLElement | null>(null)
 const compact = ref(false)
 
+const { stackCount } = useModalStack()
+const zIndex = computed(() => 100 + stackCount.value * 10 + 31)
+
 function checkCompact() {
 	const el = toolbarEl.value
 	if (!el) return
@@ -58,23 +63,26 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<Transition name="floating-action-bar" appear>
-		<div
-			v-if="shown"
-			class="floating-action-bar drop-shadow-2xl fixed z-[21] p-4 bottom-0"
-			aria-live="polite"
-		>
+	<Teleport to="body">
+		<Transition name="floating-action-bar" appear>
 			<div
-				ref="toolbarEl"
-				role="toolbar"
-				:aria-label="ariaLabel"
-				class="relative overflow-clip flex items-center gap-2 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-4 py-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
-				:class="{ 'bar-compact': compact }"
+				v-if="shown"
+				class="floating-action-bar drop-shadow-2xl fixed p-4 bottom-0"
+				:style="{ zIndex }"
+				aria-live="polite"
 			>
-				<slot />
+				<div
+					ref="toolbarEl"
+					role="toolbar"
+					:aria-label="ariaLabel"
+					class="relative overflow-clip flex items-center gap-2 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-4 py-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
+					:class="{ 'bar-compact': compact }"
+				>
+					<slot />
+				</div>
 			</div>
-		</div>
-	</Transition>
+		</Transition>
+	</Teleport>
 </template>
 
 <style scoped>

packages/ui/src/composables/modal-stack.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed, type Ref, ref } from 'vue'
 
 const isClient = typeof window !== 'undefined'
 const stack: symbol[] = []
@@ -33,6 +33,7 @@ export function useModalStack() {
 	}
 
 	const hasModal = computed(() => stackSizeRef.value > 0)
+	const stackCount: Readonly<Ref<number>> = stackSizeRef
 
-	return { push, pop, isTopmost, stackSize, hasModal }
+	return { push, pop, isTopmost, stackSize, hasModal, stackCount }
 }