From 376d85d7b2811f79c9389b8d4df34b2af1d3cc1f Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Wed, 13 May 2026 13:48:50 +0100
Subject: [PATCH] fix(studio): query performance query column truncation
 (#45878)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Previously our Query Performance Query column was scrollable inline.
This means if you have thicc scrollbars turned on via your OS, it would
look a bit clunky. This fix truncates query, full query still viewable
in the click through sheet.

| Before | After |
|--------|--------|
| <img width="1106" height="1164" alt="cleanshot_2026-05-13_at_18 56
16_2x"
src="https://github.com/user-attachments/assets/4718e8d7-d3c5-499b-a125-6192ac547bfe"
/> | <img width="456" height="286" alt="Screenshot 2026-05-13 at 13 34
30"
src="https://github.com/user-attachments/assets/7446afb5-c0d7-4272-905a-42c144334472"
/> |






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

## Summary by CodeRabbit

## Release Notes

* **Style**
* Adjusted query column width in the query performance monitoring table
for optimized layout.

* **Bug Fixes**
* Enhanced query display rendering with improved data type handling to
prevent potential display issues.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45878)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../QueryPerformance/QueryPerformance.constants.ts          | 2 +-
 .../interfaces/QueryPerformance/QueryPerformanceGrid.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts
index 14170d2bd59..1db7baf5732 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts
@@ -13,7 +13,7 @@ export const QUERY_PERFORMANCE_PRESET_MAP = {
 } as const
 
 export const QUERY_PERFORMANCE_COLUMNS = [
-  { id: 'query', name: 'Query', description: undefined, minWidth: 500 },
+  { id: 'query', name: 'Query', description: undefined, minWidth: 450 },
   { id: 'prop_total_time', name: 'Time consumed', description: undefined, minWidth: 150 },
   { id: 'calls', name: 'Calls', description: undefined, minWidth: 100 },
   { id: 'max_time', name: 'Max time', description: undefined, minWidth: 100 },
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
index 5115ebec593..5bfb6e69c73 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
@@ -187,11 +187,11 @@ export const QueryPerformanceGrid = ({
               </div>
               <CodeBlock
                 language="pgsql"
-                className="bg-transparent! p-0! m-0! border-none! whitespace-nowrap! [&>code]:whitespace-nowrap! [&>code]:wrap-break-word overflow-visible! truncate! w-full! pr-20! pointer-events-none"
-                wrapperClassName="max-w-full! flex-1"
+                className="bg-transparent! p-0! m-0! border-none! truncate! whitespace-nowrap! w-full! pr-20! pointer-events-none"
+                wrapperClassName="flex-1 min-w-0 max-w-full overflow-hidden!"
                 hideLineNumbers
                 hideCopy
-                value={value.replace(/\s+/g, ' ').trim() as string}
+                value={typeof value === 'string' ? value.replace(/\s+/g, ' ').trim() : ''}
                 wrapLines={false}
               />
               {onCurrentSelectQuery && (