[object Object]

← back to Homesonspec

web+mobile: stable data-hos-install-prompt hook + hide banner in app WebView (TK-11155)

e387ffba77c5fc8340cedef5de2c4cfa02222c2c · 2026-09-03 15:06:53 -0700 · Steve

- InstallPrompt.tsx: add data-hos-install-prompt to the dialog root so other
  surfaces (the mobile app's WebView CSS) can target it reliably without
  depending on Tailwind utility classes that may change.
- browse.tsx: add "[data-hos-install-prompt] { display: none !important; }"
  to the injected CSS so the site's "Add to Home Screen" banner never shows
  inside the native app's Browse WebView (the native app already IS the
  install; the web nag is redundant/confusing there).

Reversible: git revert this commit.

Files touched

Diff

commit e387ffba77c5fc8340cedef5de2c4cfa02222c2c
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Sep 3 15:06:53 2026 -0700

    web+mobile: stable data-hos-install-prompt hook + hide banner in app WebView (TK-11155)
    
    - InstallPrompt.tsx: add data-hos-install-prompt to the dialog root so other
      surfaces (the mobile app's WebView CSS) can target it reliably without
      depending on Tailwind utility classes that may change.
    - browse.tsx: add "[data-hos-install-prompt] { display: none !important; }"
      to the injected CSS so the site's "Add to Home Screen" banner never shows
      inside the native app's Browse WebView (the native app already IS the
      install; the web nag is redundant/confusing there).
    
    Reversible: git revert this commit.
---
 apps/mobile/app/(tabs)/browse.tsx         | 3 +++
 apps/web/src/components/InstallPrompt.tsx | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/apps/mobile/app/(tabs)/browse.tsx b/apps/mobile/app/(tabs)/browse.tsx
index 11c6dc2b..0b012ed0 100644
--- a/apps/mobile/app/(tabs)/browse.tsx
+++ b/apps/mobile/app/(tabs)/browse.tsx
@@ -174,6 +174,9 @@ const INJECTED_CSS = `
       '.bg-brand-950 { display: none !important; }',
       // Give body top breathing room now that nav is gone
       'main { padding-top: 8px !important; }',
+      // Hide the site's "Add to Home Screen" PWA install prompt — the native
+      // app already IS the install; the web banner is redundant/confusing here.
+      '[data-hos-install-prompt] { display: none !important; }',
     ].join('\\n');
     document.head.appendChild(style);
   } catch(e) {}
diff --git a/apps/web/src/components/InstallPrompt.tsx b/apps/web/src/components/InstallPrompt.tsx
index 15f5343a..1171094c 100644
--- a/apps/web/src/components/InstallPrompt.tsx
+++ b/apps/web/src/components/InstallPrompt.tsx
@@ -124,6 +124,9 @@ export default function InstallPrompt() {
     <div
       role="dialog"
       aria-label="Install Homes on Spec"
+      // Stable hook for the mobile app's WebView CSS to hide this banner
+      // inside the in-app Browse tab (the native app has its own install path).
+      data-hos-install-prompt
       className="fixed inset-x-3 bottom-3 z-[1000] mx-auto max-w-md rounded-2xl border border-brand-200 bg-white p-4 shadow-lg shadow-brand-950/10"
     >
       <div className="flex items-start gap-3">

← 9b533a90 mobile: regenerate splash.png as a large full-screen brand l  ·  back to Homesonspec  ·  web: disable the site-wide InstallPrompt PWA banner (TK-1115 b233a41e →