From 8af48c1e94d40469a2fd870fe12c13d95816a4f5 Mon Sep 17 00:00:00 2001
From: BilalG1 <bg2002@gmail.com>
Date: Fri, 17 Apr 2026 14:13:49 -0700
Subject: [PATCH] fix(dashboard): correct keyboard shortcut display and HTML
 entity rendering (#1342)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Two small UI bugs found while auditing `apps/dashboard` for visible
defects.

### 1. Dashboards empty state hardcoded `Cmd+K`


`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx:80`

The empty state copy referenced the command palette as `Cmd+K`. The rest
of the dashboard renders the shortcut as the `⌘ K` keycap (see
`cmdk-search.tsx:1062`), so this one string was inconsistent. Replaced
with `⌘ K` to match the convention.

**Before/after flicker:**

![bug 5
flicker](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/bug5-flicker.gif)

**Pixel diff** — 3,500 diff pixels (0.270%). Changed regions: the "No
dashboards yet" description line (the Cmd+K text) and the "DEV" badge in
the bottom-right.

![bug 5 pixel
diff](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/bug5-pixeldiff.png)

| Before | After |
|---|---|
|
![before](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/before-bug5-cmdk.png)
|
![after](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/after-bug5-cmdk.png)
|

### 2. Vercel page rendered `&apos;` as raw text


`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx:168`,
`:169`, `:414`

Three string literals contained `&apos;`:

```tsx
? "You&apos;ll receive a publishable client key and a secret server key for this project."
: "You&apos;ll receive a secret server key for this project."
…
subtitle="See Vercel&apos;s documentation on environment variables for more details."
```

These are JS strings passed into props, not JSX text nodes — React only
decodes HTML entities in JSX text, so the literal characters `&apos;`
ended up in the DOM. Verified via `document.querySelector` — actual text
content was `You&apos;ll receive a secret server key for this project.`.
Replaced with a plain ASCII apostrophe.

**Before/after flicker:**

![bug 7
flicker](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/bug7-flicker.gif)

**Pixel diff** — 1,252 diff pixels (0.163%). Changed region: the
`You&apos;ll` → `You'll` line.

![bug 7 pixel
diff](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/bug7-pixeldiff.png)

| Before | After |
|---|---|
|
![before](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/before-bug7-apos.png)
|
![after](https://gist.githubusercontent.com/BilalG1/adf11369b93cf280e1af49428a5b4f89/raw/after-bug7-apos.png)
|

## Test plan

- [x] Visited `/projects/<id>/dashboards` with no dashboards — empty
state now reads `(⌘ K)`
- [x] Visited `/projects/<id>/vercel` — both the "API keys generated"
subtitle and the "Need more detail?" subtitle render `'` as a real
apostrophe
- [x] `eslint` clean on both touched files
---
 .../projects/[projectId]/dashboards/page-client.tsx         | 2 +-
 .../(protected)/projects/[projectId]/vercel/page-client.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
index dbb0fa39a..e72fcfacc 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
@@ -77,7 +77,7 @@ export default function PageClient() {
             <div>
               <Typography className="font-semibold text-foreground">No dashboards yet</Typography>
               <Typography variant="secondary" className="text-sm mt-1">
-                Create a dashboard from the command palette (Cmd+K) or click &quot;New Dashboard&quot; above.
+                Create a dashboard from the command palette (⌘ K) or click &quot;New Dashboard&quot; above.
               </Typography>
             </div>
           </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx
index e9116fdf4..d8d10858e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx
@@ -165,8 +165,8 @@ export default function PageClient() {
           ) : (
             <p className="text-xs text-muted-foreground">
               {requirePublishableClientKey
-                ? "You&apos;ll receive a publishable client key and a secret server key for this project."
-                : "You&apos;ll receive a secret server key for this project."}
+                ? "You'll receive a publishable client key and a secret server key for this project."
+                : "You'll receive a secret server key for this project."}
             </p>
           ),
         },
@@ -411,7 +411,7 @@ export default function PageClient() {
           <DesignCard
             glassmorphic
             title="Need more detail?"
-            subtitle="See Vercel&apos;s documentation on environment variables for more details."
+            subtitle="See Vercel's documentation on environment variables for more details."
             icon={ClockIcon}
           >
             <DesignButton asChild variant="secondary">