fix dashboard UI: restricted row styling + replays empty state

BilalG1 · BilalG1 · commit 71453fac01ab · 2026-04-21T16:28:59.000-07:00
- 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.
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
@@ -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
@@ -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}
