fix: empty states in mobile view (#8079)

* fix: mobile nav bar and empty state in mobile view #7906 #7905

* revert: mobile nav changes

Author: tdgao

apps/frontend/src/layouts/default.vue

@@ -733,7 +733,7 @@
 					</template>
 					<template v-else>
 						<SearchIcon aria-hidden="true" class="smaller" />
-						{{ formatMessage(navMenuMessages.search) }}
+						<span>{{ formatMessage(navMenuMessages.search) }}</span>
 					</template>
 				</Button>
 				<template v-if="auth.user">

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

@@ -1,7 +1,7 @@
 <template>
-	<div class="mx-auto flex flex-col items-center p-6 text-center">
+	<div class="mx-auto flex max-w-full flex-col items-center p-6 text-center">
 		<slot name="illustration">
-			<component :is="illustration" v-if="illustration" class="h-[200px] w-auto" />
+			<component :is="illustration" v-if="illustration" class="h-[200px] w-auto max-w-full" />
 		</slot>
 		<div class="flex flex-col items-center gap-1.5">
 			<span class="text-2xl font-semibold text-contrast">