From 4280384994047eb69bdd1c2afc4e081e2008ad88 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Fri, 23 Oct 2026 12:47:05 +0200
Subject: [PATCH] fix(web): style cdn checker results table and align play tool
 icons (#2979)

* fix(web): style cdn checker results table and align play tool icons

The CDN cache checker rendered its results table unstyled because the
wrapper opted out of the prose table rules. Provider icons and status
squares now sit centered in their columns across the play tools, and
h3/h4 prose headings are semibold like h1/h2 so they read as headings
in the mono font.

* fix(web): semibold header wordmark so the brand stands apart from nav links

* fix(web): tighten logo mark spacing and drop the visible ring in light mode

* fix(web): center the status square in the mcp health check table
---
 .../play/cdn-checker/components/results-table.tsx  | 14 +++++++-------
 .../app/(landing)/play/checker/[slug]/client.tsx   |  2 +-
 apps/web/src/app/(landing)/play/checker/client.tsx | 12 ++++++------
 .../src/app/(landing)/play/mcp-health/client.tsx   |  2 +-
 apps/web/src/content/logo-with-context-menu.tsx    |  6 +++---
 apps/web/src/styles/globals.css                    |  4 ++--
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx b/apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx
index 1cc408310..b68ab5319 100644
--- a/apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx
+++ b/apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx
@@ -30,7 +30,7 @@ function CacheStatusIndicator({
 }) {
   return (
     <div
-      className={cn("size-4", CACHE_STATUS_COLOR[status])}
+      className={cn("mx-auto size-4", CACHE_STATUS_COLOR[status])}
       title={CACHE_STATUS_DESCRIPTION[status]}
     />
   );
@@ -38,7 +38,7 @@ function CacheStatusIndicator({
 
 export function CacheStatusLegend() {
   return (
-    <div className="not-prose my-4 flex flex-wrap gap-2">
+    <div className="flex flex-wrap gap-2">
       {Object.entries(CACHE_STATUS_COLOR).map(([status, className]) => (
         <div
           key={status}
@@ -120,9 +120,9 @@ export function ResultsTable() {
   const errorRows = rows.filter((row) => row.state === "error");
 
   return (
-    <div className="not-prose grid gap-2">
+    <div className="grid gap-2">
       {errorRows.length > 0 ? (
-        <p className="text-muted-foreground text-sm">
+        <p className="text-muted-foreground my-0! text-sm">
           Unreachable:{" "}
           {errorRows
             .map((row) => regionFormatter(row.region, "short"))
@@ -146,11 +146,11 @@ export function ResultsTable() {
                 <td>
                   <IconCloudProvider
                     provider="globe"
-                    className="text-muted-foreground size-4"
+                    className="text-muted-foreground mx-auto size-4"
                   />
                 </td>
                 <td>
-                  <div className="bg-muted-foreground size-4" />
+                  <div className="bg-muted-foreground mx-auto size-4" />
                 </td>
                 <td>
                   <br />
@@ -170,7 +170,7 @@ export function ResultsTable() {
                     <td>
                       <IconCloudProvider
                         provider={config.provider}
-                        className="size-4"
+                        className="mx-auto size-4"
                       />
                     </td>
                     <td>
diff --git a/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx b/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx
index b230a264d..02d25a368 100644
--- a/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx
+++ b/apps/web/src/app/(landing)/play/checker/[slug]/client.tsx
@@ -169,7 +169,7 @@ export function Results({ data }: ResultsProps) {
                         <td>
                           <IconCloudProvider
                             provider={regionInfo.provider}
-                            className="size-4"
+                            className="mx-auto size-4"
                           />
                         </td>
                         <td>
diff --git a/apps/web/src/app/(landing)/play/checker/client.tsx b/apps/web/src/app/(landing)/play/checker/client.tsx
index 67c713506..56f50f0a3 100644
--- a/apps/web/src/app/(landing)/play/checker/client.tsx
+++ b/apps/web/src/app/(landing)/play/checker/client.tsx
@@ -365,11 +365,11 @@ export function ResultTable() {
               <td>
                 <IconCloudProvider
                   provider="globe"
-                  className="text-muted-foreground size-4"
+                  className="text-muted-foreground mx-auto size-4"
                 />
               </td>
               <td>
-                <div className="bg-muted-foreground size-4" />
+                <div className="bg-muted-foreground mx-auto size-4" />
               </td>
               <td>
                 <br />
@@ -386,13 +386,13 @@ export function ResultTable() {
                   <td>
                     <IconCloudProvider
                       provider={regionConfig.provider}
-                      className="size-4"
+                      className="mx-auto size-4"
                     />
                   </td>
                   <td>
                     <div
                       className={cn(
-                        "size-4",
+                        "mx-auto size-4",
                         STATUS_CODES[
                           value.status.toString()[0] as keyof typeof STATUS_CODES
                         ],
@@ -436,11 +436,11 @@ function FailedRow({ failure }: { failure: CheckerFailure }) {
       <td>
         <IconCloudProvider
           provider={regionConfig.provider}
-          className="size-4"
+          className="mx-auto size-4"
         />
       </td>
       <td>
-        <div className="bg-muted-foreground size-4" />
+        <div className="bg-muted-foreground mx-auto size-4" />
       </td>
       <td>
         {regionConfig.flag} {regionConfig.code}{" "}
diff --git a/apps/web/src/app/(landing)/play/mcp-health/client.tsx b/apps/web/src/app/(landing)/play/mcp-health/client.tsx
index 773c13f52..b5d85150e 100644
--- a/apps/web/src/app/(landing)/play/mcp-health/client.tsx
+++ b/apps/web/src/app/(landing)/play/mcp-health/client.tsx
@@ -689,7 +689,7 @@ function StatusDot({ input }: { input: boolean | null | StepResult }) {
       role="img"
       aria-label={label}
       title={label}
-      className={cn("size-4", statusDotClass(input))}
+      className={cn("mx-auto size-4", statusDotClass(input))}
     />
   );
 }
diff --git a/apps/web/src/content/logo-with-context-menu.tsx b/apps/web/src/content/logo-with-context-menu.tsx
index 9e1728b27..960a9d383 100644
--- a/apps/web/src/content/logo-with-context-menu.tsx
+++ b/apps/web/src/content/logo-with-context-menu.tsx
@@ -13,15 +13,15 @@ export function LogoWithContextMenu() {
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
-        <Link href="/" className="flex items-center gap-2">
+        <Link href="/" className="flex items-center gap-1">
           <Image
             src="/assets/landing/openstatus-logo.svg"
             alt="openstatus logo"
             width={20}
             height={20}
-            className="border-border dark:border-foreground rounded-[50%] border"
+            className="border-background dark:border-foreground rounded-[50%] border"
           />
-          <span className="hidden sm:block">openstatus</span>
+          <span className="hidden font-semibold sm:block">openstatus</span>
         </Link>
       </ContextMenuTrigger>
       <ContextMenuContent className="min-w-[var(--radix-dropdown-menu-trigger-width)] rounded-none">
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 1d9dd7c18..fd6e665f0 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -231,11 +231,11 @@
 }
 
 .prose h3 {
-  @apply text-base text-foreground font-medium tracking-tight mt-8 mb-3 relative scroll-mt-8;
+  @apply text-base text-foreground font-semibold tracking-tight mt-8 mb-3 relative scroll-mt-8;
 }
 
 .prose h4 {
-  @apply text-base text-foreground font-medium tracking-tight mt-6 mb-2 relative scroll-mt-6;
+  @apply text-base text-foreground font-semibold tracking-tight mt-6 mb-2 relative scroll-mt-6;
 }
 
 .prose hr:not(:where(.not-prose, .not-prose *)) {
-- 
2.54.0