From 2e861b541548ede6c005503f73c0286e65470a0c Mon Sep 17 00:00:00 2001
From: Anthony Lio <lionnet.ant@gmail.com>
Date: Fri, 11 Sep 2026 17:40:53 +0300
Subject: [PATCH] fix(docs): guides table overflow (#50221)

## What kind of change does this PR introduce?

bug fix of table usage within guides

## What is the current behavior?

table markup is used within the observability guide causing overflow of
the content

## What is the new behavior?

favors table component usage within mdx guide to fix the overflow and
enable scroll

| state | preview |
| -------|------|
| before | <img width="1171" height="668" alt="image"
src="https://github.com/user-attachments/assets/bdbb905e-0ea9-4cde-b20b-84b4ef9a4137"
/> |
| after | <img width="1171" height="668" alt="image"
src="https://github.com/user-attachments/assets/9e062222-1dad-49da-bdbe-616d89703301"
/> |

## Test
1. visit
[/docs/guides/observability/log-field-reference](https://supabase.com/docs/guides/observability/log-field-reference?queryGroups=source&source=edge_logs)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
  - Improved table rendering in the log field reference documentation.
- Updated documentation tables to use the shared table presentation for
a more consistent layout.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/components/Table.tsx                                | 2 ++
 .../docs/content/guides/observability/log-field-reference.mdx | 4 ++--
 apps/docs/features/docs/MdxBase.shared.tsx                    | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/docs/components/Table.tsx b/apps/docs/components/Table.tsx
index dec8afe8723..4fa967d90b6 100644
--- a/apps/docs/components/Table.tsx
+++ b/apps/docs/components/Table.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { TableHTMLAttributes, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/docs/content/guides/observability/log-field-reference.mdx b/apps/docs/content/guides/observability/log-field-reference.mdx
index ded838e551b..23bec25e0eb 100644
--- a/apps/docs/content/guides/observability/log-field-reference.mdx
+++ b/apps/docs/content/guides/observability/log-field-reference.mdx
@@ -13,7 +13,7 @@ For example, the schema path `metadata.request.cf.country` is queried as `log_at
     <Tabs scrollable size="small" type="underlined" defaultActiveId="edge_logs" queryGroup="source">
       {logConstants.schemas.map((schema) => (
         <TabPanel id={schema.reference} key={schema.reference} label={schema.name}>
-          <table>
+          <Table>
             <thead>
               <tr>
                 <th className="font-bold">Schema path</th>
@@ -36,7 +36,7 @@ For example, the schema path `metadata.request.cf.country` is queried as `log_at
                   </tr>
                 ))}
             </tbody>
-          </table>
+          </Table>
         </TabPanel>
       ))}
     </Tabs>
diff --git a/apps/docs/features/docs/MdxBase.shared.tsx b/apps/docs/features/docs/MdxBase.shared.tsx
index d3704faeff8..592f8826926 100644
--- a/apps/docs/features/docs/MdxBase.shared.tsx
+++ b/apps/docs/features/docs/MdxBase.shared.tsx
@@ -20,6 +20,7 @@ import { RealtimeLimitsEstimator } from '~/components/RealtimeLimitsEstimator'
 import { RegionsList, SmartRegionsList } from '~/components/RegionsList'
 import { SharedData } from '~/components/SharedData'
 import StepHikeCompact from '~/components/StepHikeCompact'
+import Table from '~/components/Table'
 import { TerraformProviderSchema } from '~/components/TerraformProviderSchema'
 import { WrapperDashboardIntegration } from '~/components/WrapperDashboardIntegration'
 import { CodeSampleDummy, CodeSampleWrapper } from '~/features/directives/CodeSample.client'
@@ -109,6 +110,7 @@ const components = {
   ShowUntil,
   SqlToRest,
   StepHikeCompact,
+  Table,
   Tabs,
   TabPanel,
   TerraformProviderSchema,
@@ -130,6 +132,7 @@ const components = {
     </Heading>
   ),
   pre: Pre,
+  table: Table,
   /**
    * Force inline code tags to go sync, this prevents Heading anchor resolution fail due to
    * our CodeBlock component being async. We need to find a better solution for more future