From 618da3ae32830a7c3da0c9f4d88ddbdd48bfba72 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 21 Oct 2026 22:22:07 -0600
Subject: [PATCH 1/2] fix: mobile nav bar and empty state in mobile view #7906
 #7905

---
 apps/frontend/src/layouts/default.vue          | 13 +++----------
 packages/ui/src/components/base/EmptyState.vue |  4 ++--
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index efbd1d4303c..98fcdccbe3d 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -741,7 +741,7 @@
 					</template>
 					<template v-else>
 						<SearchIcon aria-hidden="true" class="smaller" />
-						{{ formatMessage(navMenuMessages.search) }}
+						<span class="truncate">{{ formatMessage(navMenuMessages.search) }}</span>
 					</template>
 				</Button>
 				<template v-if="auth.user">
@@ -1726,6 +1726,7 @@ function changeTheme() {
 		display: flex;
 		height: calc(var(--size-mobile-navbar-height) + env(safe-area-inset-bottom));
 		border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
+		padding-inline: 2rem;
 		padding-bottom: env(safe-area-inset-bottom);
 		position: fixed;
 		left: 0;
@@ -1760,7 +1761,7 @@ function changeTheme() {
 			position: relative;
 			background: none;
 			display: flex;
-			flex-basis: 0;
+			flex: 1 1 0;
 			justify-content: center;
 			align-items: center;
 			flex-direction: row;
@@ -1822,14 +1823,6 @@ function changeTheme() {
 				color: var(--color-text);
 			}
 
-			&:first-child {
-				margin-left: 2rem;
-			}
-
-			&:last-child {
-				margin-right: 2rem;
-			}
-
 			&.router-link-exact-active:not(&.no-active) {
 				svg {
 					color: var(--color-brand);
diff --git a/packages/ui/src/components/base/EmptyState.vue b/packages/ui/src/components/base/EmptyState.vue
index caa00eb11f3..38b3e598370 100644
--- a/packages/ui/src/components/base/EmptyState.vue
+++ b/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">

From 9c0e708779d39f2ec05745c22ff9db3d0f306a86 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 22 Oct 2026 11:55:22 -0600
Subject: [PATCH 2/2] revert: mobile nav changes

---
 apps/frontend/src/layouts/default.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 98fcdccbe3d..f6407cf3237 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -741,7 +741,7 @@
 					</template>
 					<template v-else>
 						<SearchIcon aria-hidden="true" class="smaller" />
-						<span class="truncate">{{ formatMessage(navMenuMessages.search) }}</span>
+						<span>{{ formatMessage(navMenuMessages.search) }}</span>
 					</template>
 				</Button>
 				<template v-if="auth.user">
@@ -1726,7 +1726,6 @@ function changeTheme() {
 		display: flex;
 		height: calc(var(--size-mobile-navbar-height) + env(safe-area-inset-bottom));
 		border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
-		padding-inline: 2rem;
 		padding-bottom: env(safe-area-inset-bottom);
 		position: fixed;
 		left: 0;
@@ -1761,7 +1760,7 @@ function changeTheme() {
 			position: relative;
 			background: none;
 			display: flex;
-			flex: 1 1 0;
+			flex-basis: 0;
 			justify-content: center;
 			align-items: center;
 			flex-direction: row;
@@ -1823,6 +1822,14 @@ function changeTheme() {
 				color: var(--color-text);
 			}
 
+			&:first-child {
+				margin-left: 2rem;
+			}
+
+			&:last-child {
+				margin-right: 2rem;
+			}
+
 			&.router-link-exact-active:not(&.no-active) {
 				svg {
 					color: var(--color-brand);