fix: final content tab qa (#5611)

* fix: queued admonition always showing

* fix: dont apply grayscale to checkbox in content card item

* fix: actual stable id for disable/enable/bulk state

* fix: vue-router resolve workaround

* fix: show disable/enable btns same time

* fix: remove mr-2 on toggle

* fix: type errors + add ModpackAlreadyInstalledModal

* fix: bulk actions + overflow menu hitting ad container

* fix: responsiveness of ContentSelectionBar

* feat: better backup naming for inline backups + sorting fixes

* fix: lint

* fix: typo

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

@@ -1,11 +1,48 @@
 <script setup lang="ts">
-import { onUnmounted, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
 	shown: boolean
 	ariaLabel?: string
 }>()
 
+const toolbarEl = ref<HTMLElement | null>(null)
+const compact = ref(false)
+
+function checkCompact() {
+	const el = toolbarEl.value
+	if (!el) return
+
+	const clone = el.cloneNode(true) as HTMLElement
+	clone.classList.remove('bar-compact')
+	clone.style.position = 'absolute'
+	clone.style.visibility = 'hidden'
+	clone.style.pointerEvents = 'none'
+	clone.style.width = `${el.offsetWidth}px`
+
+	el.parentElement!.appendChild(clone)
+	const needsCompact = clone.offsetHeight > 70
+	clone.remove()
+
+	compact.value = needsCompact
+}
+
+let observer: ResizeObserver | null = null
+
+watch(
+	toolbarEl,
+	(el) => {
+		observer?.disconnect()
+		if (!el) return
+		observer = new ResizeObserver(() => {
+			checkCompact()
+		})
+		observer.observe(el.parentElement!)
+		checkCompact()
+	},
+	{ immediate: true },
+)
+
 watch(
 	() => props.shown,
 	(shown) => {
@@ -15,6 +52,7 @@ watch(
 )
 
 onUnmounted(() => {
+	observer?.disconnect()
 	document?.body.classList.remove('floating-action-bar-shown')
 })
 </script>
@@ -27,9 +65,11 @@ onUnmounted(() => {
 			aria-live="polite"
 		>
 			<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>
@@ -81,4 +121,12 @@ onUnmounted(() => {
 .intercom-lightweight-app-launcher {
 	z-index: 9 !important;
 }
+
+.bar-compact .bar-label {
+	display: none;
+}
+
+.bar-compact .cq-show-icon {
+	display: block;
+}
 </style>