fix(app): fix highlighted style and text overlapping issues (#16097)

fix RQA-2960 and RQA-3082

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

Fixed the highlighted blue when not hovered over the upload file box on
desktop app. Also, fixed the texts overlapping issue happened when last
run is "less than a minute ago" on ODD.
 
## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->
Highlighted style issue:
- Click into the drag and drop box for importing a protocol file then
exit the OS file browser.
- View drag and drop box.
- Dashed box would be set to unselected gray instead of highlighted
blue.

Text wrapping issue:
- Run a protocol on ODD and then cancel the run.
- Return to Protocol screen to ensure that the text "less than a minute
ago" for last run is wrapped downward.

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->
- Removed the `focus-within` CSS psuedo class under CSS const
`StyleLabel`.
- Added a condition to display between 'normal' and 'nowrap' whiteSpace
CSS property.

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: shiyaochen <[email protected]>

app/src/molecules/UploadInput/index.tsx

@@ -29,8 +29,7 @@ const StyledLabel = styled.label`
   text-align: ${TYPOGRAPHY.textAlignCenter};
   background-color: ${COLORS.white};
 
-  &:hover,
-  &:focus-within {
+  &:hover {
     border: 2px dashed ${COLORS.blue50};
   }
 `

app/src/pages/ProtocolDashboard/ProtocolCard.tsx

@@ -194,6 +194,15 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
   if (isFailedAnalysis) protocolCardBackgroundColor = COLORS.red35
   if (isRequiredCSV) protocolCardBackgroundColor = COLORS.yellow35
 
+  const textWrap = (lastRun?: string): string => {
+    if (lastRun != null) {
+      lastRun = formatDistance(new Date(lastRun), new Date(), {
+        addSuffix: true,
+      }).replace('about ', '')
+    }
+    return lastRun === 'less than a minute ago' ? 'normal' : 'nowrap'
+  }
+
   return (
     <Flex
       alignItems={isFailedAnalysis || isRequiredCSV ? ALIGN_END : ALIGN_CENTER}
@@ -244,7 +253,11 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
         </LegacyStyledText>
       </Flex>
       <Flex width="9.25rem">
-        <LegacyStyledText as="p" color={COLORS.grey60} whiteSpace="nowrap">
+        <LegacyStyledText
+          as="p"
+          color={COLORS.grey60}
+          whiteSpace={textWrap(lastRun)}
+        >
           {lastRun != null
             ? formatDistance(new Date(lastRun), new Date(), {
                 addSuffix: true,