fix: Query Editor toolbar folds to menu to fit the window size (#2481)

microsoft · Dec 4, 2024 · 152d3b7 · 152d3b7
1 parent 086f08d
commit 152d3b7
Show file tree

Hide file tree

Showing 10 changed files with 1,160 additions and 591 deletions.
diff --git a/src/webviews/QueryEditor/QueryEditor.tsx b/src/webviews/QueryEditor/QueryEditor.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles({
     root: {
         display: 'grid',
         gridTemplateRows: '100vh',
-        minWidth: '900px',
+        // minWidth: '520px',
     },
 });
 

diff --git a/src/webviews/QueryEditor/QueryPanel/QueryPanel.tsx b/src/webviews/QueryEditor/QueryPanel/QueryPanel.tsx
@@ -5,7 +5,7 @@
 
 import { makeStyles } from '@fluentui/react-components';
 import { QueryMonaco } from './QueryMonaco';
-import { QueryToolbar } from './QueryToolbar';
+import { QueryToolbarOverflow } from './QueryToolbarOverflow';
 
 const useClasses = makeStyles({
     monacoContainer: {
@@ -26,7 +26,7 @@ export const QueryPanel = () => {
 
     return (
         <section className={classes.container}>
-            <QueryToolbar />
+            <QueryToolbarOverflow />
             <section className={classes.monacoContainer}>
                 <QueryMonaco />
             </section>

diff --git a/src/webviews/QueryEditor/QueryPanel/QueryToolbar.tsx b/src/webviews/QueryEditor/QueryPanel/QueryToolbar.tsx