Update page content into tables

app/globals.css

@@ -180,3 +180,35 @@ body {
   content: 'Step ' counter(onboarding-step) ': ';
   font-weight: inherit;
 }
+
+/* Responsive layout and overflow fixes */
+* {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Prevent horizontal overflow in code blocks and content */
+pre, code {
+  max-width: 100%;
+  overflow-x: auto;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+/* Specific fix for template injection strings */
+code[class*="language-"] {
+  word-break: break-all;
+}
+
+/* Table responsive behavior */
+.prose table {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+@media (max-width: 1649px) {
+  .prose table {
+    font-size: 0.875rem;
+  }
+}

docs/product/insights/ai/mcp/dashboard.mdx

@@ -4,6 +4,42 @@ sidebar_order: 10
 description: "Learn how to use Sentry's MCP Dashboard."
 ---
 
+<style>{`
+  .mcp-table th {
+    background-color: var(--gray-a2);
+    font-weight: 600;
+    color: var(--gray-12);
+    border-bottom: 2px solid var(--gray-a4);
+    text-align: left;
+    font-size: 0.875rem;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+  }
+
+  .dark .mcp-table th {
+    background-color: var(--gray-a3);
+    border-bottom-color: var(--gray-a5);
+  }
+
+  .mcp-table td {
+    border-top: 1px solid var(--gray-a3);
+    vertical-align: top;
+    padding: 0.75rem;
+  }
+
+  .mcp-table tr:first-child th {
+    border-top: none;
+  }
+
+  .mcp-table tr:hover {
+    background-color: var(--gray-a1);
+  }
+
+  .dark .mcp-table tr:hover {
+    background-color: var(--gray-a2);
+  }
+`}</style>
+
 <Include name="feature-limited-on-team-retention.mdx" />
 
 Once you've [configured the Sentry SDK](/product/insights/ai/mcp/getting-started/) for your MCP project, you'll start receiving data in the Sentry [MCP Insights](https://sentry.io/orgredirect/organizations/:orgslug/insights/ai/mcp/) dashboard.
@@ -12,17 +48,29 @@ The main dashboard provides a comprehensive view of all your MCP server activiti
 
 ![MCP Monitoring Overview](./img/overview.png)
 
-The dashboard displays key widgets like:
+The dashboard displays key widgets:
+
+<div className="mcp-table">
+
+| Widget | Description |
+| --- | --- |
+| **Traffic** | Shows MCP requests over time, error rates, and releases to track overall server activity and health |
+| **Traffic by Client** | Displays which MCP clients are connecting to your server (cursor-vscode, CustomMCPClient, etc.) |
+| **Transport Distribution** | Shows the distribution of transport protocols used (http, sse, custom transports) |
+| **Most Used Tools/Resources/Prompts** | Shows which MCP tools/resources/prompts are called most frequently by clients |
+| **Slowest Tools/Resources/Prompts** | Identifies tools/resources/prompts with the highest response times for performance optimization |
+| **Most Failing Tools/Resources/Prompts** | Highlights tools/resources/prompts with the highest error rates that need attention |
 
-- **Traffic**: Shows MCP requests over time, error rates, and releases to track overall server activity and health
-- **Traffic by Client**: Displays which MCP clients are connecting to your server (cursor-vscode, CustomMCPClient, etc.)
-- **Transport Distribution**: Shows the distribution of transport protocols used (http, sse, custom transports)
-- **Most Used Tools/Resources/Prompts**: Shows which MCP tools/resources/prompts are called most frequently by clients
-- **Slowest Tools/Resources/Prompts**: Identifies tools/resources/prompts with the highest response times for performance optimization
-- **Most Failing Tools/Resources/Prompts**: Highlights tools/resources/propmpts with the highest error rates that need attention
+</div>
 
 Underneath these widgets are tables that allow you to view data in more detail:
 
-- **Tools**: Performance metrics for each MCP tool including request count, error rate, average duration, and P95 latency
-- **Resources**: Access patterns and performance for MCP resources by URI, showing requests, error rate, average duration, and P95 latency
-- **Prompts**: Usage statistics for MCP prompt templates by name, including requests, error rate, average duration, and P95 latency
+<div className="mcp-table">
+
+| Table | Description |
+| --- | --- |
+| **Tools** | Performance metrics for each MCP tool including request count, error rate, average duration, and P95 latency |
+| **Resources** | Access patterns and performance for MCP resources by URI, showing requests, error rate, average duration, and P95 latency |
+| **Prompts** | Usage statistics for MCP prompt templates by name, including requests, error rate, average duration, and P95 latency |
+
+</div>

src/components/docPage/index.tsx

@@ -76,6 +76,7 @@ export function DocPage({
               'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)]',
               'prose-img:my-2',
               'prose-strong:text-[var(--gray-12)]',
+              'prose-pre:overflow-x-auto prose-pre:max-w-full prose-code:break-words',
               fullWidth ? 'max-w-none w-full' : 'w-full',
             ].join(' ')}
             id="doc-content"
@@ -117,7 +118,7 @@ export function DocPage({
         {hasToc && (
           <aside
             data-layout-anchor="right"
-            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block w-[250px]"
+            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block w-[220px] toc-lg:w-[250px]"
           >
             <div className="sidebar">
               <SidebarTableOfContents />
@@ -128,6 +129,25 @@ export function DocPage({
       </section>
       <style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); box-sizing: border-box; }`}</style>
       <style>{`
+        /* Responsive content width constraints */
+        @media (min-width: 1400px) and (max-width: 1649px) {
+          /* Laptop screens with TOC visible but limited width */
+          #doc-content {
+            max-width: calc(100vw - 300px - 220px - 3rem); /* sidebar - toc - padding */
+            margin-left: auto;
+            margin-right: auto;
+          }
+        }
+
+        @media (min-width: 1650px) and (max-width: 2056px) {
+          /* Larger laptop/desktop screens */
+          #doc-content {
+            max-width: calc(100vw - 300px - 250px - 4rem); /* sidebar - toc - padding */
+            margin-left: auto;
+            margin-right: auto;
+          }
+        }
+
         @media (min-width: 2057px) {
           :root {
             --doc-content-w: 1200px;

tailwind.config.mjs

@@ -58,7 +58,8 @@ export default {
       },
       screens: {
         'lg-xl': {min: '1130px'},
-        toc: '1490px',
+        toc: '1400px',
+        'toc-lg': '1650px',
       },
     },
   },