fix(org): stop painting the phone title's surface, and leave the shared empty state as designed

Author: waleedlatif1

apps/sim/app/o/[organizationId]/settings/settings-frame.tsx

@@ -22,7 +22,7 @@ function PhoneTitle({ title }: { title: string }) {
   const slot = useContext(MobileTitleSlot)
   if (!slot) return null
   return createPortal(
-    <Surface canvas>
+    <Surface>
       <SettingsMobileTitle title={title} />
     </Surface>,
     slot

apps/sim/platform/design-system/components/empty-state/empty-state.module.css

@@ -9,7 +9,7 @@
 .empty {
   justify-content: center;
   min-height: calc(var(--spacing-56) * 2);
-  padding-block: var(--spacing-16);
+  padding: var(--spacing-16) var(--spacing-8);
   color: var(--ui-ink);
 }
 

apps/sim/platform/design-system/styles/embedded.css

@@ -51,11 +51,6 @@
   background: var(--ui-canvas);
 }
 
-/* A part carried into the host's own bar: the bar paints, so the surface around it must not. */
-[data-platform-ui][data-canvas]:has(> [data-host-chrome]) {
-  background: transparent;
-}
-
 [data-platform-ui][data-theme="dark"] {
   color-scheme: dark;
 }

apps/sim/platform/embedded/app/(shell)/settings/_components/settings-screen/settings-screen.tsx

@@ -24,7 +24,7 @@ export function SettingsBreadcrumb({ title }: SettingsBreadcrumbProps) {
 /** The section's name, for the phone top bar that replaces the breadcrumb. */
 export function SettingsMobileTitle({ title }: SettingsBreadcrumbProps) {
   return (
-    <span className={styles.mobileTitle} data-host-chrome data-type='T057'>
+    <span className={styles.mobileTitle} data-type='T057'>
       {title}
     </span>
   )