fix: remove unnecessary scrollbars (#3774)

* hide scrollbar

Author: ElinorW

src/app/views/layout/LayoutStyles.tsx

@@ -4,20 +4,20 @@ export const SIDEBAR_SIZE_CSS_VAR = '--sidebar-size';
 
 export const useLayoutResizeStyles = makeResetStyles({
   [SIDEBAR_SIZE_CSS_VAR]: '23%'
-})
+});
 
 export const useLayoutStyles = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column',
-    padding: tokens.spacingHorizontalS,
-    height: 'clamp(100vh, auto, 200vh)',
-    overflow: 'hidden'
+    height: '100vh',
+    overflow: 'hidden',
+    padding: tokens.spacingHorizontalS
   },
   content: {
     display: 'flex',
     flex: 1,
-    overflowY: 'hidden',
+    overflow: 'hidden',
     minWidth: 0
   },
   sidebar: {
@@ -43,36 +43,27 @@ export const useLayoutStyles = makeStyles({
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    minWidth: '300px',
-    minHeight: 'calc(100vh - 98px)',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    minWidth: 0,
+    minHeight: 0
   },
   requestResponseArea: {
-    flex: '1 1 auto',
+    flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    height: '60vh',
-    minHeight: '550px',
-    overflow: 'hidden'
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden'
   },
-  responseArea: {
-    flex: '1 1 auto',
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '300px',
-    height: 'auto',
-    maxHeight: '100%',
+  requestArea: {
+    flex: 1,
+    minHeight: '200px',
     overflow: 'auto',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS
   },
-  requestArea: {
-    flex: '1 1 40%',
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '200px',
-    height:'auto',
-    maxHeight: '40%',
+  responseArea: {
+    flex: 1,
     overflow: 'auto',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS

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

@@ -38,14 +38,15 @@ interface IRequestProps {
 
 const useStyles = makeStyles({
   container: {
-    height: '-webkit-fill-available',
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden'
   },
   tabContainer: {
     display: 'flex',
-    flexShrink: 0,
-    overflowX: 'hidden'
+    flexShrink: 0
   },
   tabList: {
     padding: '5px 5px'
@@ -60,7 +61,7 @@ const useStyles = makeStyles({
     marginTop: tokens.spacingHorizontalS,
     backgroundColor: tokens.colorNeutralBackground1,
     minHeight: '0',
-    overflow: 'auto'
+    overflow: 'hidden'
   },
   menuButton: {
     alignSelf: 'center'