fix(dashboard): Restricted row styling + Replays empty state

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. For info on enabling replays,{" "}
+                        <StyledLink
+                          href="https://docs.stack-auth.com/docs/apps/analytics"
+                          target="_blank"
+                        >
+                          look here
+                        </StyledLink>
+                        .
+                      </Typography>
                     </div>
                   )}
                 </div>

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}