19687: Fixes log panel scrolling behavior in Safari.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index f0cbcf56be67b3e826150db35f9fccd8dc6c3187..877061de37f567bc6a3824451cb2f6951d8a8e99 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -67,6 +67,7 @@ interface MPVPanelDataProps {
     panelRef?: MutableRefObject<any>;
     forwardProps?: boolean;
     maxHeight?: string;
+    minHeight?: string;
 }
 
 interface MPVPanelActionProps {
@@ -82,7 +83,7 @@ type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps
 
 // Grid item compatible component for layout and MPV props passing
 export const MPVPanelContent = ({doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName,
-    panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight,
+    panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight, minHeight,
     ...props}: MPVPanelContentProps) => {
     useEffect(() => {
         if (panelRef && panelRef.current) {
@@ -90,11 +91,11 @@ export const MPVPanelContent = ({doHidePanel, doMaximizePanel, doUnMaximizePanel
         }
     }, [panelRef]);
 
-    const mh = panelMaximized
+    const maxH = panelMaximized
         ? '100%'
         : maxHeight;
 
-    return <Grid item style={{maxHeight: mh}} {...props}>
+    return <Grid item style={{maxHeight: maxH, minHeight}} {...props}>
         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
         <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
             { forwardProps

diff --git a/src/views/process-panel/process-log-card.tsx b/src/views/process-panel/process-log-card.tsx
index 03739699b09c8f15d2b58cf3499ce78d6972f2d6..4890c726f4c73c601f20a526400abfe6f765bd01 100644 (file)
--- a/src/views/process-panel/process-log-card.tsx
+++ b/src/views/process-panel/process-log-card.tsx
@@ -55,6 +55,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     logViewer: {
         height: '100%',
+        overflowY: 'scroll', // Required for MacOS's Safari -- See #19687
     },
     logViewerContainer: {
         height: '100%',

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index bc485d9f9dac5c454a3f82f51ebc6d9d03c8ab73..ed808b361a14c68b55121da7c1d34c0cade1daee 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -121,7 +121,7 @@ export const ProcessPanelRoot = withStyles(styles)(
                     onCopy={props.onCopyToClipboard}
                     process={process} />
             </MPVPanelContent>
-            <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-logs">
+            <MPVPanelContent forwardProps xs minHeight='50%' data-cy="process-logs">
                 <ProcessLogsCard
                     onCopy={props.onCopyToClipboard}
                     process={process}