From a09db9383bb062dc404554b8bf8208c7519dccb9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 25 May 2026 21:00:25 +0000
Subject: [PATCH 1/2] fix(web-shared): use inline blur style for tailwind v3
 compatibility

Co-authored-by: Mitul Shah <mitulxshah@gmail.com>
---
 .changeset/blur-style-prop-compat.md                         | 5 +++++
 .../src/components/sidebar/copyable-data-block.tsx           | 3 ++-
 2 files changed, 7 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..d4ef5ed78f
--- /dev/null
+++ b/.changeset/blur-style-prop-compat.md
@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Use an inline `filter: blur(4px)` style 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..2cc72a64f0 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,8 @@ 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"
+        style={{ filter: 'blur(4px)' }}
       >
         {encryptedPlaceholderPreview}
       </pre>

From 950cf21829514930ba9324b0801f60f9f5682ba4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 25 May 2026 21:09:45 +0000
Subject: [PATCH 2/2] fix(web-shared): use blur-[4px] arbitrary value for
 tailwind v3/v4 compat

Co-authored-by: Mitul Shah <mitulxshah@gmail.com>
---
 .changeset/blur-style-prop-compat.md                           | 2 +-
 .../web-shared/src/components/sidebar/copyable-data-block.tsx  | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.changeset/blur-style-prop-compat.md b/.changeset/blur-style-prop-compat.md
index d4ef5ed78f..ef54551340 100644
--- a/.changeset/blur-style-prop-compat.md
+++ b/.changeset/blur-style-prop-compat.md
@@ -2,4 +2,4 @@
 "@workflow/web-shared": patch
 ---
 
-Use an inline `filter: blur(4px)` style on the encrypted data preview instead of Tailwind v4's `blur-xs` utility, so the component renders correctly for consumers on Tailwind v3.
+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 2cc72a64f0..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,8 +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"
-        style={{ filter: 'blur(4px)' }}
+        className="pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-[4px]"
       >
         {encryptedPlaceholderPreview}
       </pre>