ui: Make source view sticky to screen size (#6085)

Author: brancz

ui/packages/shared/profile/src/ProfileView/components/VisualizationContainer/index.tsx

@@ -51,8 +51,14 @@ export const VisualizationContainer: FC<VisualizationContainerProps> = ({
       className={cx(
         'w-full min-h-96',
         snapshot.isDragging ? 'bg-gray-200 dark:bg-gray-500' : 'bg-inherit dark:bg-gray-900',
-        isMultiPanelView ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3' : ''
+        isMultiPanelView ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3' : '',
+        dashboardItem === 'source' && isMultiPanelView ? 'sticky top-0 self-start' : ''
       )}
+      style={
+        dashboardItem === 'source' && isMultiPanelView
+          ? {maxHeight: 'calc(100vh - 50px)'}
+          : undefined
+      }
     >
       <VisualizationPanel
         handleClosePanel={handleClosePanel}

ui/packages/shared/profile/src/SourceView/Highlighter.tsx

@@ -218,13 +218,13 @@ export const Highlighter = ({file, content, renderer}: HighlighterProps): JSX.El
           <div>Source</div>
         </div>
       </div>
-      <div className="text-xs">
+      <div className="text-xs overflow-auto" style={{maxHeight: 'calc(100vh - 200px)'}}>
         <SyntaxHighlighter
           language={language}
           style={isDarkMode ? atomOneDark : atomOneLight}
           showLineNumbers
           renderer={renderer}
-          customStyle={{padding: 0, height: '90vh'}}
+          customStyle={{padding: 0}}
         >
           {content}
         </SyntaxHighlighter>