From f18a848fa52c09ba69d4f5642d64c61ad295b6a7 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Mon, 18 Dec 2023 13:46:16 -0500
Subject: [PATCH 1/2] feat(app): add gradient scrim to ODD protocol command
 list

To indicate that the RunningProtocolCommandList on ODD is not scrollable, designs specify a gradient
scrim at the bottom of the list. Here, I add a sibling component that occupies that same space as
the command list and provides this gradient scrim.
---
 .../pages/OnDeviceDisplay/RunningProtocol.tsx | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx b/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
index 66f34f4f4a6..0423d39ea18 100644
--- a/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
+++ b/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useParams } from 'react-router-dom'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { useSelector } from 'react-redux'
 
 import {
@@ -12,6 +12,8 @@ import {
   JUSTIFY_CENTER,
   OVERFLOW_HIDDEN,
   POSITION_RELATIVE,
+  POSITION_ABSOLUTE,
+  ALIGN_FLEX_END,
   SPACING,
   useSwipe,
 } from '@opentrons/components'
@@ -216,18 +218,33 @@ export function RunningProtocol(): JSX.Element {
                 }
               />
             ) : (
-              <RunningProtocolCommandList
-                protocolName={protocolName}
-                runStatus={runStatus}
-                robotType={robotType}
-                playRun={playRun}
-                pauseRun={pauseRun}
-                setShowConfirmCancelRunModal={setShowConfirmCancelRunModal}
-                trackProtocolRunEvent={trackProtocolRunEvent}
-                robotAnalyticsData={robotAnalyticsData}
-                currentRunCommandIndex={currentRunCommandIndex}
-                robotSideAnalysis={robotSideAnalysis}
-              />
+              <>
+                <RunningProtocolCommandList
+                  protocolName={protocolName}
+                  runStatus={runStatus}
+                  robotType={robotType}
+                  playRun={playRun}
+                  pauseRun={pauseRun}
+                  setShowConfirmCancelRunModal={setShowConfirmCancelRunModal}
+                  trackProtocolRunEvent={trackProtocolRunEvent}
+                  robotAnalyticsData={robotAnalyticsData}
+                  currentRunCommandIndex={currentRunCommandIndex}
+                  robotSideAnalysis={robotSideAnalysis}
+                />
+                <Flex
+                  css={css`
+                    background: linear-gradient(
+                      rgba(255, 0, 0, 0) 85%,
+                      #ffffff
+                    );
+                  `}
+                  position={POSITION_ABSOLUTE}
+                  height="324px"
+                  width="944px"
+                  marginTop="148px"
+                  alignSelf={ALIGN_FLEX_END}
+                />
+              </>
             )
           ) : (
             <RunningProtocolSkeleton currentOption={currentOption} />

From c0cfc0688169d48022df50643bb8b7fa97204c90 Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:35:15 -0500
Subject: [PATCH 2/2] change px to rem

Co-authored-by: koji <koji.kanao@opentrons.com>
---
 app/src/pages/OnDeviceDisplay/RunningProtocol.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx b/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
index 0423d39ea18..48a55430427 100644
--- a/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
+++ b/app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
@@ -239,9 +239,9 @@ export function RunningProtocol(): JSX.Element {
                     );
                   `}
                   position={POSITION_ABSOLUTE}
-                  height="324px"
-                  width="944px"
-                  marginTop="148px"
+                  height="20.25rem"
+                  width="59rem"
+                  marginTop="9.25rem"
                   alignSelf={ALIGN_FLEX_END}
                 />
               </>