From 9c0609b0ecc007d88cfeaee43f7759455a569363 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Fri, 5 Feb 2021 12:56:45 -0800
Subject: [PATCH] fix(trace viewer): do not render invisble tabs (#5322)

---
 src/web/traceViewer/ui/propertiesTabbedPane.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/web/traceViewer/ui/propertiesTabbedPane.tsx b/src/web/traceViewer/ui/propertiesTabbedPane.tsx
index 47a15594f3652..01e2d3327cfc9 100644
--- a/src/web/traceViewer/ui/propertiesTabbedPane.tsx
+++ b/src/web/traceViewer/ui/propertiesTabbedPane.tsx
@@ -52,18 +52,18 @@ export const PropertiesTabbedPane: React.FunctionComponent<{
           </div>
         </div>
       </div>
-      <div className='properties-tab-content' style={{ display: selected === 'snapshot' ? 'flex' : 'none' }}>
+      { selected === 'snapshot' && <div className='properties-tab-content'>
         <SnapshotTab actionEntry={actionEntry} snapshotSize={snapshotSize} selectedTime={selectedTime} boundaries={boundaries} />
-      </div>
-      <div className='properties-tab-content' style={{ display: selected === 'source' ? 'flex' : 'none' }}>
+      </div> }
+      { selected === 'source' && <div className='properties-tab-content'>
         <SourceTab actionEntry={actionEntry} />
-      </div>
-      <div className='properties-tab-content' style={{ display: selected === 'network' ? 'flex' : 'none' }}>
+      </div> }
+      { selected === 'network' && <div className='properties-tab-content'>
         <NetworkTab actionEntry={actionEntry} />
-      </div>
-      <div className='properties-tab-content' style={{ display: selected === 'logs' ? 'flex' : 'none' }}>
+      </div> }
+      { selected === 'logs' && <div className='properties-tab-content'>
         <LogsTab actionEntry={actionEntry} />
-      </div>
+      </div> }
     </div>
   </div>;
 };