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 -->

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 },

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 && (