From c1c86e3b7237956a520cda39d06263bc31daaa82 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sat, 9 May 2026 14:12:52 -0700
Subject: [PATCH] fix: advanced rendering toggle in app barely worked (#6056)

---
 apps/app-frontend/src/App.vue                 |  6 +++++
 .../ui/src/components/base/ButtonStyled.vue   | 24 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 601fe5a7c..232305c09 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1647,6 +1647,12 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	&.app-contents::before {
 		box-shadow: none;
 	}
+
+	*,
+	:deep(*) {
+		box-shadow: none !important;
+		--tw-drop-shadow:;
+	}
 }
 
 .app-sidebar::before {
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index b4d67bca1..730edc333 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -241,7 +241,10 @@ const fontSize = computed(() => {
 <template>
 	<div
 		class="btn-wrapper"
-		:class="[{ outline: type === 'outlined', chip: type === 'chip' }, fontSize]"
+		:class="[
+			{ outline: type === 'outlined', transparent: type === 'transparent', chip: type === 'chip' },
+			fontSize,
+		]"
 		:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};--_outline-color:${color === 'standard' && type === 'outlined' ? 'var(--surface-5)' : 'currentColor'}`"
 	>
 		<slot />
@@ -314,6 +317,25 @@ const fontSize = computed(() => {
 	}
 }
 
+.disable-advanced-rendering {
+	.btn-wrapper:not(.outline):not(.transparent) :deep(:is(button, a, .button-like):first-child),
+	.btn-wrapper:not(.outline):not(.transparent) :slotted(:is(button, a, .button-like):first-child),
+	.btn-wrapper:not(.outline):not(.transparent)
+		:slotted(*)
+		> :is(button, a, .button-like):first-child,
+	.btn-wrapper:not(.outline):not(.transparent)
+		:slotted(*)
+		> *:first-child
+		> :is(button, a, .button-like):first-child,
+	.btn-wrapper
+		:slotted(*)
+		> *:first-child
+		> *:first-child
+		> :is(button, a, .button-like):first-child {
+		@apply border border-[rgba(0,0,0,0.2)];
+	}
+}
+
 .btn-wrapper.outline :deep(:is(button, a, .button-like):first-child),
 .btn-wrapper.outline :slotted(:is(button, a, .button-like):first-child),
 .btn-wrapper.outline :slotted(*) > :is(button, a, .button-like):first-child,