From 8633ebb9b32f28cce4344329840aca47e22d3197 Mon Sep 17 00:00:00 2001
From: Mitul Shah <mitulxshah@gmail.com>
Date: Tue, 26 May 2026 13:04:19 -0400
Subject: [PATCH] fix(web-shared): make encrypted-data blur backwards
 compatible with Tailwind v3 (#2108)

* fix(web-shared): use inline blur style for tailwind v3 compatibility

Co-authored-by: Mitul Shah <mitulxshah@gmail.com>

* fix(web-shared): use blur-[4px] arbitrary value for tailwind v3/v4 compat

Co-authored-by: Mitul Shah <mitulxshah@gmail.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
---
 .changeset/blur-style-prop-compat.md                         | 5 +++++
 .../src/components/sidebar/copyable-data-block.tsx           | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/blur-style-prop-compat.md

diff --git a/.changeset/blur-style-prop-compat.md b/.changeset/blur-style-prop-compat.md
new file mode 100644
index 0000000000..ef54551340
--- /dev/null
+++ b/.changeset/blur-style-prop-compat.md
@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Use the `blur-[4px]` arbitrary-value utility on the encrypted data preview instead of Tailwind v4's `blur-xs` utility, so the component renders correctly for consumers on Tailwind v3.
diff --git a/packages/web-shared/src/components/sidebar/copyable-data-block.tsx b/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
index eb85678777..26abfb87ea 100644
--- a/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
+++ b/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
@@ -19,7 +19,7 @@ export function EncryptedDataBlock() {
     <div className="relative min-h-20 overflow-hidden rounded-md border border-gray-alpha-400 bg-background-100">
       <pre
         aria-hidden="true"
-        className="pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-xs"
+        className="pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-[4px]"
       >
         {encryptedPlaceholderPreview}
       </pre>