fix: code snippets UI enhancements (#3798)

Author: ElinorW

src/app/views/common/monaco/Monaco.tsx

@@ -72,8 +72,8 @@ const Monaco = ({ body, onChange, language, readOnly, height, extraInfoElement,
           {extraInfoElement}
           <Editor
             language={language || 'json'}
-            width=' 100%'
-            height=' 100%'
+            width='100%'
+            height='100%'
             value={formattedBody}
             options={editorOptions}
             onChange={onChange}

src/app/views/query-response/pivot-items/pivot-item.tsx

@@ -63,7 +63,7 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     height: '100%',
     minHeight: '600px',
-    overflow: 'auto'
+    overflow: 'hidden'
   }
 });
 

src/app/views/query-response/snippets/Snippets.tsx

@@ -65,8 +65,10 @@ const supportedLanguages: LanguageSnippet = {
 const useSnippetStyles = makeStyles({
   container: {
     margin: '0 auto',
+    paddingTop: '5px',
+    paddingLeft: '5px',
     maxHeight: '100vh',
-    overflowY: 'auto',
+    overflowY: 'hidden',
     display: 'flex',
     flexDirection: 'column'
   },
@@ -78,16 +80,15 @@ const useSnippetStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     flex: '1 1 auto',
-    height: '30vh',
-    overflowY: 'auto'
+    height: '60vh'
   },
   copyButton: {
     marginLeft: 'auto'
   },
   snippetContent: {
     display: 'flex',
     flexDirection: 'column',
-    overflowY: 'auto',
+    overflowY: 'hidden',
     maxHeight: 'calc(100vh-120px)'
   }
 });
@@ -201,11 +202,14 @@ const RenderSnippets = () => {
   return (
     <div id='snippets-tablist' className={styles.container}>
       <TabList selectedValue={selectedLanguage} onTabSelect={onTabSelect}>
-        {Object.keys(supportedLanguages).map((language: string) => (
-          <Tab key={language} value={language}>
-            {language === 'CSharp' ? 'C#' : language}
-          </Tab>
-        ))}
+        <Tab key='CSharp' value='CSharp'>C#</Tab>
+        {/*The rest should be sorted in alphabetical order to match docs */}
+        {Object.keys(supportedLanguages)
+          .filter(lang => lang !== 'CSharp')
+          .sort((a, b) => a.localeCompare(b))
+          .map(language => (
+            <Tab key={language} value={language}>{language}</Tab>
+          ))}
       </TabList>
       <div id='snippet-content'>
         <SnippetContent language={selectedLanguage as string} />