Support mobile display

src/App.tsx

@@ -9,7 +9,6 @@ import {DashboardContext, MainContext} from '@contexts';
 
 import {EndpointModal, MessagePanel, notificationCall} from '@molecules';
 import FullScreenLogOutput from '@molecules/LogOutput/FullscreenLogOutput';
-import LogOutputHeader from '@molecules/LogOutput/LogOutputHeader';
 
 import {EndpointProcessing, Loading, NotFound} from '@pages';
 
@@ -187,7 +186,6 @@ const App: React.FC<AppProps> = ({plugins}) => {
           <Route path="/" element={<Navigate to="/tests" replace />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
-        {isFullScreenLogOutput ? <LogOutputHeader logOutput={logOutput} isFullScreen /> : null}
         <CSSTransition
           nodeRef={logRef}
           in={isFullScreenLogOutput}

src/components/atoms/LabelListItem/LabelListItem.styled.ts

@@ -14,4 +14,7 @@ export const StyledLabelListItem = styled.li<{isSkippedMode: boolean}>`
 
   font-size: 12px;
   font-weight: 400;
+  text-wrap: nowrap;
+
+  max-width: 50vw;
 `;

src/components/atoms/SplitLabelText/SplitLabelText.tsx

@@ -29,7 +29,7 @@ const SplitLabelText: React.FC<SplitLabelProps> = props => {
       <Text color={Colors.slate400} className={textClassName}>
         {key}:{' '}
       </Text>
-      <Text color={Colors.slate200} className={textClassName}>
+      <Text color={Colors.slate200} className={textClassName} ellipsis>
         {rest.join(':')}
       </Text>
     </>

src/components/molecules/EntityGrid/EntityGrid.styled.tsx

@@ -34,6 +34,8 @@ export const ItemWrapper = styled.div`
 
     background: ${Colors.slate850};
   }
+
+  min-width: 100px;
 `;
 
 export const DetailsWrapper = styled.div`
@@ -75,6 +77,12 @@ export const ItemColumn = styled.div<{$isStretch?: boolean}>`
   align-items: center;
 `;
 
+export const ExecutionTimeItemColumn = styled(ItemColumn)`
+  @media ${maxDevice.mobileL} {
+    display: none;
+  }
+`;
+
 export const StyledMetricItem = styled.div`
   display: flex;
   flex-direction: column;

src/components/molecules/EntityGrid/EntityGridItemPure.tsx

@@ -16,7 +16,15 @@ import Colors from '@styles/Colors';
 
 import {formatDuration} from '@utils/formatDate';
 
-import {DetailsWrapper, ItemColumn, ItemRow, ItemWrapper, RowsWrapper, StyledMetricItem} from './EntityGrid.styled';
+import {
+  DetailsWrapper,
+  ExecutionTimeItemColumn,
+  ItemColumn,
+  ItemRow,
+  ItemWrapper,
+  RowsWrapper,
+  StyledMetricItem,
+} from './EntityGrid.styled';
 import EntityGridItemExecutionTime from './EntityGridItemExecutionTime';
 
 export interface Item {
@@ -83,15 +91,15 @@ const EntityGridItemPure = forwardRef<HTMLDivElement, EntityGridItemPureProps>((
               </Text>
             </div>
           </ItemColumn>
-          <ItemColumn>
+          <ExecutionTimeItemColumn>
             <EntityGridItemExecutionTime time={latestExecution?.startTime} />
             {isRunning ? (
               <DotsDropdown
                 placement="bottomRight"
                 items={[{key: 1, label: <span onClick={abort}>Abort all executions</span>}]}
               />
             ) : null}
-          </ItemColumn>
+          </ExecutionTimeItemColumn>
         </ItemRow>
         <RowsWrapper>
           <ItemRow $flex={1}>

src/components/molecules/FilterMenu/MenuFilter.styled.tsx

@@ -67,7 +67,6 @@ export const StyledFilterLabel = styled.div<{isFiltersDisabled: boolean}>`
   justify-content: space-between;
   align-items: center;
 
-  width: 296px;
   border: 1px solid ${Colors.slate800};
   border-radius: 4px;
   padding: 11px;

src/components/molecules/Hint/Hint.styled.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import Colors from '@styles/Colors';
+import {maxDevice} from '@styles/MediaQueries';
 
 export const StyledWizardHintContainer = styled.div`
   display: flex;
@@ -16,6 +17,10 @@ export const StyledWizardHintContainer = styled.div`
   border-bottom-right-radius: 4px;
 
   text-align: center;
+
+  @media ${maxDevice.tablet} {
+    display: none;
+  }
 `;
 
 export const StyledImageContainer = styled.div`

src/components/molecules/LogOutput/FullscreenLogOutput/FullScreenLogOutput.tsx

@@ -1,4 +1,4 @@
-import {MouseEvent, forwardRef, useCallback, useEffect, useRef, useState} from 'react';
+import React, {MouseEvent, forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 
 import Ansi from 'ansi-to-react';
 import {debounce} from 'lodash';
@@ -8,6 +8,7 @@ import {selectFullScreenLogOutput} from '@redux/reducers/configSlice';
 
 import {LogOutputProps} from '../LogOutput';
 import {StyledLogTextContainer, StyledPreLogText} from '../LogOutput.styled';
+import LogOutputHeader from '../LogOutputHeader';
 import {useCountLines, useLastLines} from '../utils';
 
 import {StyledFullscreenLogOutputContainer} from './FullscreenLogOutput.styled';
@@ -43,6 +44,7 @@ const FullScreenLogOutput = forwardRef<HTMLDivElement, Pick<LogOutputProps, 'act
         logOutputDOMRect={logOutputDOMRect}
         onTransitionEnd={scrollToBottom}
       >
+        <LogOutputHeader logOutput={logOutput} isFullScreen />
         <StyledLogTextContainer>
           {visibleLogs ? (
             <StyledPreLogText>

src/components/molecules/LogOutput/FullscreenLogOutput/FullscreenLogOutput.styled.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import {Coordinates} from '@models/config';
 
 import Colors from '@styles/Colors';
+import {maxDevice} from '@styles/MediaQueries';
 
 import {BaseLogOutputStyles} from '../LogOutput.styled';
 
@@ -14,7 +15,7 @@ export const StyledFullscreenLogOutputContainer = styled.div<{
   ${({logOutputDOMRect}) =>
     logOutputDOMRect
       ? `
-  position: absolute;
+  position: fixed;
   z-index: 1001;
 
   color: ${Colors.slate400};
@@ -26,18 +27,18 @@ export const StyledFullscreenLogOutputContainer = styled.div<{
     width: ${logOutputDOMRect?.width}px;
     height: ${logOutputDOMRect?.height}px;
   }
-  
+
   &.full-screen-log-output-enter-active {
     top: 0;
     left: 100px;
 
     width: calc(100% - 70px);
     height: 100vh;
 
-    transition: 
-      top 0.4s ease-in-out, 
-      left 0.3s ease-in-out 0.4s, 
-      height 0.4s ease-in-out, 
+    transition:
+      top 0.4s ease-in-out,
+      left 0.3s ease-in-out 0.4s,
+      height 0.4s ease-in-out,
       width 0.3s ease-in-out 0.4s
     ;
   }
@@ -65,10 +66,10 @@ export const StyledFullscreenLogOutputContainer = styled.div<{
     width: ${logOutputDOMRect?.width}px;
     height: ${logOutputDOMRect?.height}px;
 
-    transition: 
-      top 0.2s ease-in-out 0.2s, 
-      left 0.2s ease-in-out, 
-      height 0.2s ease-in-out 0.2s, 
+    transition:
+      top 0.2s ease-in-out 0.2s,
+      left 0.2s ease-in-out,
+      height 0.2s ease-in-out 0.2s,
       width 0.2s ease-in-out
     ;
   }
@@ -80,6 +81,18 @@ export const StyledFullscreenLogOutputContainer = styled.div<{
     width: ${logOutputDOMRect?.width}px;
     height: ${logOutputDOMRect?.height}px;
   }
+
+  @media ${maxDevice.tablet} {
+    &.full-screen-log-output-enter-active {
+      left: 60px;
+      width: calc(100% - 30px);
+    }
+
+    &.full-screen-log-output-enter-done {
+      left: 60px;
+      width: calc(100% - 60px);
+    }
+  }
   `
       : ''};
 `;

src/components/molecules/LogOutput/LogOutput.styled.tsx

@@ -16,15 +16,24 @@ export const BaseLogOutputStyles = `
   ${invisibleScroll}
 `;
 
-export const StyledLogOutputContainer = styled.div`
-  height: 70vh;
+export const LogOutputWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
 
+export const StyledLogOutputContainer = styled.div`
+  position: relative;
+  max-height: 100%;
+  flex: 1;
   border-radius: 4px;
+  overflow: auto;
+  ${invisibleScroll}
 `;
 
 export const StyledLogTextContainer = styled.div<{bannerVisible?: boolean}>`
+  height: 100%;
   flex: 1;
-  height: ${({bannerVisible}) => (bannerVisible ? '55vh' : '70vh')};
   background-color: ${Colors.slate900};
 
   ${BaseLogOutputStyles}
@@ -33,15 +42,16 @@ export const StyledLogTextContainer = styled.div<{bannerVisible?: boolean}>`
 export const StyledPreLogText = styled.pre`
   display: flex;
   flex-direction: column;
+  overflow: initial;
 
   padding: 10px;
   font-size: 12px;
 
-  ${invisibleScroll}
   ${AnsiClassesMapping}
 `;
 
 export const StyledLogOutputActionsContainer = styled.ul`
+  position: sticky;
   display: flex;
   justify-content: flex-end;
   flex: 1;
@@ -63,7 +73,10 @@ export const StyledLogOutputHeaderContainer = styled.div<{$isFullScreen?: boolea
 
   color: ${Colors.slate400};
   `
-      : ''}
+      : `
+  position: relative;
+  float: right;
+  `}
 
   display: flex;
   justify-content: space-between;
@@ -73,12 +86,6 @@ export const StyledLogOutputHeaderContainer = styled.div<{$isFullScreen?: boolea
   background: transparent;
 `;
 
-export const StyledLogOutputHeaderTitle = styled.span`
-  font-size: 14px;
-  font-style: italic;
-  font-weight: 600;
-`;
-
 const FullscreenIconBaseStyles = `
   position: absolute;
   right: 35px;

src/components/molecules/LogOutput/LogOutput.tsx

@@ -22,6 +22,7 @@ import {getRtkIdToken} from '@utils/fetchUtils';
 
 import {
   DrawerBannerContainer,
+  LogOutputWrapper,
   StyledLogOutputContainer,
   StyledLogTextContainer,
   StyledPreLogText,
@@ -34,7 +35,6 @@ export type LogOutputProps = {
   executionId?: string;
   actions?: LogAction[];
   isRunning?: boolean;
-  title?: string;
   initialLines?: number;
   onChangeTab: (tab: string) => void;
 };
@@ -49,14 +49,13 @@ const LogOutput: React.FC<LogOutputProps> = props => {
     executionId,
     actions = ['copy', 'fullscreen'],
     isRunning,
-    title,
     initialLines = 300,
     onChangeTab,
   } = props;
 
-  const bottomRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const isScrolledToBottom = useScrolledToBottom(containerRef.current);
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const isScrolledToBottom = useScrolledToBottom(scrollableRef.current);
 
   const wsRoot = useWsEndpoint();
 
@@ -135,19 +134,13 @@ const LogOutput: React.FC<LogOutputProps> = props => {
   }, [logs, isFullScreenLogOutput]);
 
   useEffect(() => {
-    if (containerRef.current && isScrolledToBottom) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight - containerRef.current.clientHeight;
+    if (scrollableRef.current && isScrolledToBottom) {
+      scrollableRef.current.scrollTop = scrollableRef.current.scrollHeight;
     }
   }, [logs]);
 
   useEffect(() => {
-    setTimeout(() => {
-      bottomRef?.current?.scrollIntoView({behavior: 'auto', block: 'end'});
-    }, 100);
-  }, [executionId]);
-
-  useEffect(() => {
-    const rect = containerRef?.current?.getBoundingClientRect();
+    const rect = scrollableRef?.current?.getBoundingClientRect();
     if (rect) {
       dispatch(
         setLogOutputDOMRect({
@@ -174,27 +167,28 @@ const LogOutput: React.FC<LogOutputProps> = props => {
   }, []);
 
   return (
-    <StyledLogOutputContainer ref={containerRef}>
+    <LogOutputWrapper>
       {drawerBanner ? <DrawerBannerContainer>{drawerBanner}</DrawerBannerContainer> : null}
-      <LogOutputHeader logOutput={logs} actions={actions} title={title} />
-
-      <StyledLogTextContainer bannerVisible={Boolean(drawerBanner)}>
-        {visibleLogs ? (
-          <StyledPreLogText data-test="log-output">
-            {!expanded && lines >= initialLines ? (
-              <>
-                <a href="#" onClick={onExpand}>
-                  Click to show all {lines} lines...
-                </a>
-                <br />
-              </>
-            ) : null}
-            <Ansi useClasses>{visibleLogs}</Ansi>
-          </StyledPreLogText>
-        ) : null}
-        <div ref={bottomRef} />
-      </StyledLogTextContainer>
-    </StyledLogOutputContainer>
+      <StyledLogOutputContainer ref={containerRef}>
+        <LogOutputHeader logOutput={logs} actions={actions} />
+
+        <StyledLogTextContainer ref={scrollableRef} bannerVisible={Boolean(drawerBanner)}>
+          {visibleLogs ? (
+            <StyledPreLogText data-test="log-output">
+              {!expanded && lines >= initialLines ? (
+                <>
+                  <a href="#" onClick={onExpand}>
+                    Click to show all {lines} lines...
+                  </a>
+                  <br />
+                </>
+              ) : null}
+              <Ansi useClasses>{visibleLogs}</Ansi>
+            </StyledPreLogText>
+          ) : null}
+        </StyledLogTextContainer>
+      </StyledLogOutputContainer>
+    </LogOutputWrapper>
   );
 };