diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index aa3941601c..ab80a62b8d 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -93,5 +93,5 @@
 }
 
 .network-request .cm-wrapper {
-  max-height: 300px;
+  height: 300px;
 }
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 79affa56ee..80a4912984 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -51,7 +51,7 @@ export const NetworkResource: React.FunctionComponent<{
   }, [contentType, resource, resourceName, routeStatus]);
 
   return <div className='network-request'>
-    <Expandable expanded={expanded} setExpanded={setExpanded} title={renderTitle()}>
+    <Expandable expanded={expanded} setExpanded={setExpanded} title={renderTitle()} expandOnTitleClick={true}>
       {expanded && <NetworkResourceDetails resource={resource} />}
     </Expandable>
   </div>;
@@ -78,7 +78,6 @@ const NetworkResourceDetails: React.FunctionComponent<{
         }
       }
 
-
       if (resource.response.content._sha1) {
         const useBase64 = resource.response.content.mimeType.includes('image');
         const response = await fetch(`sha1/${resource.response.content._sha1}`);
diff --git a/packages/web/src/components/expandable.tsx b/packages/web/src/components/expandable.tsx
index f283057408..8718e2014c 100644
--- a/packages/web/src/components/expandable.tsx
+++ b/packages/web/src/components/expandable.tsx
@@ -21,13 +21,14 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
   title: JSX.Element | string,
   setExpanded: Function,
   expanded: boolean,
-}>> = ({ title, children, setExpanded, expanded }) => {
+  expandOnTitleClick?: boolean,
+}>> = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {
   return <div className={'expandable' + (expanded ? ' expanded' : '')}>
-    <div className='expandable-title'>
+    <div className='expandable-title' onClick={() => expandOnTitleClick && setExpanded(!expanded)}>
       <div
         className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')}
         style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
-        onClick={() => setExpanded(!expanded)} />
+        onClick={() => !expandOnTitleClick && setExpanded(!expanded)} />
       {title}
     </div>
     { expanded && <div style={{ marginLeft: 25 }}>{children}</div> }