fix: component layout issues (#3629)

* reduce white  space

* remove borders

* make code snippets more responsive

* reduce tab size

* add scrollbar

Author: ElinorW

src/app/views/layout/LayoutStyles.tsx

@@ -15,7 +15,7 @@ export const useLayoutStyles = makeStyles({
   },
   content: {
     display: 'flex',
-    gap: tokens.spacingVerticalS
+    overflowY: 'hidden'
   },
   sidebar: {
     flex: '0 0 auto',
@@ -27,16 +27,13 @@ export const useLayoutStyles = makeStyles({
     flex: '1 1 auto',
     display: 'flex',
     flexDirection: 'column',
-    gap: tokens.spacingHorizontalS,
-    overflowY: 'auto',
     minHeight: '300px',
     height: 'calc(100vh - 120px)'
   },
   requestResponseArea: {
     flex: '1',
     display: 'flex',
     flexDirection: 'column',
-    gap: tokens.spacingHorizontalS,
     height: '100%',
     overflow: 'hidden'
   },
@@ -47,7 +44,7 @@ export const useLayoutStyles = makeStyles({
     maxHeight: '55%',
     overflow: 'hidden',
     borderRadius: tokens.borderRadiusMedium,
-    padding: tokens.spacingHorizontalMNudge
+    padding: tokens.spacingHorizontalS
   },
   requestArea: {
     flex: '1',
@@ -56,6 +53,6 @@ export const useLayoutStyles = makeStyles({
     maxHeight: '37%',
     overflow: 'hidden',
     borderRadius: tokens.borderRadiusMedium,
-    padding: tokens.spacingHorizontalMNudge
+    padding: tokens.spacingHorizontalS
   }
 });

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

@@ -57,7 +57,7 @@ const useStyles = makeStyles({
     minHeight: 0,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
     borderRadius: tokens.borderRadiusMedium,
-    padding: tokens.spacingHorizontalM,
+    padding: tokens.spacingHorizontalS,
     marginTop: tokens.spacingHorizontalS,
     backgroundColor: tokens.colorNeutralBackground1,
     overflow: 'hidden'
@@ -125,7 +125,7 @@ export const GetPivotItems = () => {
     <div className={styles.container}>
       {mobileScreen ? (
         <Overflow minimumVisible={1}>
-          <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
+          <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small'>
             {tabs.map((tab) => (
               <OverflowItem key={tab.id} id={tab.id} priority={tab.id === selectedValue ? 2 : 1}>
                 <Tab value={tab.id} icon={tab.icon}>
@@ -137,7 +137,7 @@ export const GetPivotItems = () => {
           </TabList>
         </Overflow>
       ) : (
-        <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
+        <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small'>
           {tabs.map((tab) => (
             <Tab key={tab.id} value={tab.id} icon={tab.icon}>
               {tab.name}

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

@@ -8,7 +8,7 @@ import {
   Tab,
   TabList,
   TabValue,
-  Text, tokens
+  Text
 } from '@fluentui/react-components';
 import { useContext, useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../../store';
@@ -65,26 +65,31 @@ const supportedLanguages: LanguageSnippet = {
 
 const useSnippetStyles = makeStyles({
   container: {
-    margin: '0 auto'
+    margin: '0 auto',
+    maxHeight: '100vh',
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column'
   },
   extraInformation: {
     color: 'rgb(0, 128, 0)',
-    marginLeft: '28px',
-    lineHeight: '1.5'
-  },
-  codeContainer: {
-    border: `solid ${tokens.colorNeutralStroke1} ${tokens.strokeWidthThin}`,
-    borderRadius: tokens.borderRadiusMedium,
-    padding: tokens.spacingHorizontalMNudge,
-    margin: tokens.spacingHorizontalMNudge
+    marginLeft: '28px'
   },
   codeContainerLayout: {
     display: 'flex',
     flexDirection: 'column',
-    height: '450px'
+    flex: '1 1 auto',
+    height: '30vh',
+    overflowY: 'auto'
   },
   copyButton: {
     marginLeft: 'auto'
+  },
+  snippetContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+    maxHeight: 'calc(100vh-120px)'
   }
 });
 
@@ -230,7 +235,7 @@ const SnippetContent: React.FC<SnippetContentProps> = (
   const styles = useSnippetStyles();
 
   return (
-    <div className={styles.codeContainer}>
+    <div className={styles.snippetContent}>
       {showSpinner && (
         <Spinner
           labelPosition='below'

src/app/views/query-runner/request/RequestV9.tsx

@@ -130,7 +130,7 @@ const Request = (props: IRequestProps) => {
       <div className={styles.tabContainer}>
         {mobileScreen ? (
           <Overflow minimumVisible={2}>
-            <TabList selectedValue={selectedTab} onTabSelect={(_, data) => handleTabSelect(data.value)}>
+            <TabList selectedValue={selectedTab} onTabSelect={(_, data) => handleTabSelect(data.value)} size='small'>
               {tabs.map((tab) => (
                 <OverflowItem key={tab.id} id={tab.id} priority={tab.id === selectedTab ? 2 : 1}>
                   <Tab value={tab.id} icon={tab.icon}>
@@ -142,7 +142,7 @@ const Request = (props: IRequestProps) => {
             </TabList>
           </Overflow>
         ) : (
-          <TabList selectedValue={selectedTab} onTabSelect={(_, data) => handleTabSelect(data.value)}>
+          <TabList selectedValue={selectedTab} onTabSelect={(_, data) => handleTabSelect(data.value)} size='small'>
             {tabs.map((tab) => (
               <Tab key={tab.id} value={tab.id} icon={tab.icon}>
                 {tab.name}