From 36a410e5222e01a1e76ff7142843072c88b99908 Mon Sep 17 00:00:00 2001
From: Dale Mcdiarmid <dale@clickhouse.com>
Date: Fri, 11 Apr 2025 10:02:01 +0100
Subject: [PATCH 1/2] fix wrap on buttons

---
 src/components/CodeViewer/CodeInterpreter.tsx | 62 ++++++++++++-------
 1 file changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/components/CodeViewer/CodeInterpreter.tsx b/src/components/CodeViewer/CodeInterpreter.tsx
index a820679cf64..714419a433e 100644
--- a/src/components/CodeViewer/CodeInterpreter.tsx
+++ b/src/components/CodeViewer/CodeInterpreter.tsx
@@ -15,6 +15,7 @@ import { formatBytes, formatReadableRows, roundToDynamicPrecision } from './util
 import { getGoogleAnalyticsUserIdFromBrowserCookie } from '../../lib/google/google'
 
 
+
 interface Props {
   queryString: string
   runnable: boolean
@@ -55,6 +56,21 @@ function CodeInterpreter({
     }
   })
 
+  function useWindowWidth(): number {
+    const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0)
+  
+    useEffect(() => {
+      function handleResize() {
+        setWidth(window.innerWidth)
+      }
+  
+      window.addEventListener('resize', handleResize)
+      return () => window.removeEventListener('resize', handleResize)
+    }, [])
+  
+    return width
+  }
+
   function generateId(): string {
     return short.generate().toUpperCase().slice(0, 27)
   }
@@ -197,28 +213,28 @@ function CodeInterpreter({
       )
 
       return (
-        <div className={`flex items-end whitespace-pre-wrap ${chart && 'w-[180px] h-[28px]'}`}>
+        <div className={`flex items-end whitespace-pre-wrap flex-nowrap ${chart && 'w-[180px] h-[28px]'}`}>
           {show_results}
           {chart && (
-            <div className=''>
-            <RadioGroup
-              orientation='vertical'
-              value={currentView}>
-              <RadioGroup.Item
-                label='Table'
-              onClick={(): void => {
-                  setCurrentView(DefaultView.Table)
-                }}
-                value={DefaultView.Table}
-              />
-              <RadioGroup.Item
-                label='Chart'
+            <div className='flex-nowrap'>
+              <RadioGroup
+                orientation='horizontal'
+                value={currentView}>
+                <RadioGroup.Item
+                  label='Table'
                 onClick={(): void => {
-                  setCurrentView(DefaultView.Chart)
-                }}
-                value={DefaultView.Chart}
-              />
-            </RadioGroup>
+                    setCurrentView(DefaultView.Table)
+                  }}
+                  value={DefaultView.Table}
+                />
+                <RadioGroup.Item
+                  label='Chart'
+                  onClick={(): void => {
+                    setCurrentView(DefaultView.Chart)
+                  }}
+                  value={DefaultView.Chart}
+                />
+              </RadioGroup>
             </div>
           )}
           
@@ -227,7 +243,10 @@ function CodeInterpreter({
     }
   }
 
+  const windowWidth = useWindowWidth()
+
   const runButton = () => {
+
     if (runnable) {
       return (
         <div className='flex justify-between'>
@@ -235,8 +254,9 @@ function CodeInterpreter({
             <div className='flex items-center'>{hideTableResultButton()}</div>
             <div className='flex items-end min-h-[28px]'>
               {show_statistics && results?.response?.statistics && (
-                <div className={`whitespace-pre-wrap text-[12px] mx-auto italic ${chart ? 'ml-[8px]' : ''}`}>
-                  {`Read ${formatReadableRows(results.response.statistics.rows_read)} rows and ${formatBytes(results.response.statistics.bytes_read)} in ${roundToDynamicPrecision(results.response.statistics.elapsed)} secs`}
+                <div className={`whitespace-pre-wrap text-[${windowWidth > 600 ? '12': '10'}px] mx-auto italic ${chart ? 'ml-[8px]' : ''}`}>
+                  { windowWidth > 600 ? `Read ${formatReadableRows(results.response.statistics.rows_read)} rows and ${formatBytes(results.response.statistics.bytes_read)} in ${roundToDynamicPrecision(results.response.statistics.elapsed)} secs` : 
+                  `Read ${formatReadableRows(results.response.statistics.rows_read)} rows in ${roundToDynamicPrecision(results.response.statistics.elapsed)} secs` }
                 </div>
               )}
             </div>

From 0d945e26444691f2d7eac49c4b816254c0008350 Mon Sep 17 00:00:00 2001
From: Dale Mcdiarmid <dale@clickhouse.com>
Date: Fri, 11 Apr 2025 10:21:26 +0100
Subject: [PATCH 2/2] no wrap

---
 src/components/CodeViewer/CodeInterpreter.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/CodeViewer/CodeInterpreter.tsx b/src/components/CodeViewer/CodeInterpreter.tsx
index 714419a433e..be19a646a31 100644
--- a/src/components/CodeViewer/CodeInterpreter.tsx
+++ b/src/components/CodeViewer/CodeInterpreter.tsx
@@ -219,10 +219,11 @@ function CodeInterpreter({
             <div className='flex-nowrap'>
               <RadioGroup
                 orientation='horizontal'
+                style={{'flexWrap': 'nowrap'}}
                 value={currentView}>
                 <RadioGroup.Item
                   label='Table'
-                onClick={(): void => {
+                  onClick={(): void => {
                     setCurrentView(DefaultView.Table)
                   }}
                   value={DefaultView.Table}
@@ -250,7 +251,7 @@ function CodeInterpreter({
     if (runnable) {
       return (
         <div className='flex justify-between'>
-          <div className='flex items-center'>
+          <div className='flex items-center flex-nowrap'>
             <div className='flex items-center'>{hideTableResultButton()}</div>
             <div className='flex items-end min-h-[28px]'>
               {show_statistics && results?.response?.statistics && (