From 71453fac01aba6c61e5eae7e0e75a23b7e91528f Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 21 Apr 2026 16:28:59 -0700
Subject: [PATCH 1/3] fix dashboard UI: restricted row styling + replays empty
 state

- User detail page: restyle the Restricted row so it matches the
  EditableInput appearance used by sibling fields (rounded border,
  ring, shadow, h-8). Previously it was a bare button with rounded-md
  hover styling that looked visually inconsistent with the rest of
  the user details grid.

- Analytics > Replays: replace the bare "No session replays yet"
  empty state with a short description of what session replays do
  and a docs link to https://docs.stack-auth.com/docs/apps/analytics
  so new users can discover how to enable them.
---
 .../analytics/replays/page-client.tsx         | 14 ++++++++--
 .../users/[userId]/page-client.tsx            | 26 ++++++++++---------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 6305fea065..7cfb2e6f76 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1955,11 +1955,21 @@ export default function PageClient() {
                       </Typography>
                     </div>
                   ) : (
-                    <div className="text-center p-6">
+                    <div className="text-center p-6 max-w-md mx-auto">
                       <MonitorPlayIcon className="h-12 w-12 text-muted-foreground/40 mx-auto" />
-                      <Typography className="mt-3 text-sm font-medium text-muted-foreground">
+                      <Typography className="mt-3 text-sm font-medium">
                         No session replays yet
                       </Typography>
+                      <Typography className="mt-2 text-sm text-muted-foreground">
+                        Session replays let you watch how users interact with your app to debug issues and understand user behavior. Install the analytics SDK in your app to start capturing replays.
+                      </Typography>
+                      <StyledLink
+                        href="https://docs.stack-auth.com/docs/apps/analytics"
+                        target="_blank"
+                        className="mt-3 inline-block text-sm"
+                      >
+                        Learn more in the docs
+                      </StyledLink>
                     </div>
                   )}
                 </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
index b48828e3bd..f9705df1dc 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
@@ -321,18 +321,20 @@ function RestrictedStatusRow({ user }: { user: ServerUser }) {
   return (
     <>
       <UserInfo icon={<ProhibitIcon size={16}/>} name="Restricted">
-        <button
-          type="button"
-          onClick={() => setDialogOpen(true)}
-          className={cn(
-            "w-full text-left px-1 py-0 rounded-md text-sm",
-            "hover:ring-1 hover:ring-slate-300 dark:hover:ring-gray-500 hover:bg-slate-50 dark:hover:bg-gray-800 hover:cursor-pointer",
-            "focus:outline-none focus-visible:ring-1 focus-visible:ring-slate-500 dark:focus-visible:ring-gray-50 focus-visible:bg-slate-100 dark:focus-visible:bg-gray-800",
-            "transition-colors hover:transition-none",
-          )}
-        >
-          {displayValue}
-        </button>
+        <div className="flex items-center relative w-full">
+          <button
+            type="button"
+            onClick={() => setDialogOpen(true)}
+            className={cn(
+              "stack-scope flex w-full items-center rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
+              "h-8 px-3 text-sm text-left text-muted-foreground",
+              "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] hover:cursor-pointer",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]",
+            )}
+          >
+            <span className="truncate">{displayValue}</span>
+          </button>
+        </div>
       </UserInfo>
       <RestrictionDialog
         user={user}

From b9e232334fd9ab3ef01aa14fbddd534cb3b2a376 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 21 Apr 2026 16:37:01 -0700
Subject: [PATCH 2/3] tighten replays empty-state copy and drop SDK install
 claim

---
 .../projects/[projectId]/analytics/replays/page-client.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 7cfb2e6f76..29159f7737 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1961,7 +1961,7 @@ export default function PageClient() {
                         No session replays yet
                       </Typography>
                       <Typography className="mt-2 text-sm text-muted-foreground">
-                        Session replays let you watch how users interact with your app to debug issues and understand user behavior. Install the analytics SDK in your app to start capturing replays.
+                        Session replays let you watch how users interact with your app. Replays will appear here once your project starts capturing them.
                       </Typography>
                       <StyledLink
                         href="https://docs.stack-auth.com/docs/apps/analytics"

From 2807f35cce7c9f9fecea123be252c82a0b3dd47f Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Wed, 22 Apr 2026 17:36:27 -0700
Subject: [PATCH 3/3] Inline replays empty-state docs link as CTA

Replace separate "Learn more in the docs" link with an inline CTA
("For info on enabling replays, look here") inside the description.
---
 .../analytics/replays/page-client.tsx            | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 29159f7737..2790241b6c 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1961,15 +1961,15 @@ export default function PageClient() {
                         No session replays yet
                       </Typography>
                       <Typography className="mt-2 text-sm text-muted-foreground">
-                        Session replays let you watch how users interact with your app. Replays will appear here once your project starts capturing them.
+                        Session replays let you watch how users interact with your app. For info on enabling replays,{" "}
+                        <StyledLink
+                          href="https://docs.stack-auth.com/docs/apps/analytics"
+                          target="_blank"
+                        >
+                          look here
+                        </StyledLink>
+                        .
                       </Typography>
-                      <StyledLink
-                        href="https://docs.stack-auth.com/docs/apps/analytics"
-                        target="_blank"
-                        className="mt-3 inline-block text-sm"
-                      >
-                        Learn more in the docs
-                      </StyledLink>
                     </div>
                   )}
                 </div>