fix liquids overflow menu and remove console.log

Opentrons · Oct 28, 2024 · 7ff50b0 · 7ff50b0
1 parent d2ebffd
commit 7ff50b0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -34,19 +34,12 @@ export function RobotCoordinateSpaceWithRef(
       {}
     )
 
-    wholeDeckViewBox = `${viewBoxOriginX} ${-deckYDimension} ${deckXDimension} ${deckYDimension}`
-
-    // wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
     // Add padding to prevent clipping and better center the content
-    const padding = 20
-    wholeDeckViewBox = `${viewBoxOriginX - padding} ${
-      viewBoxOriginY - padding
-    } ${deckXDimension + padding * 2} ${deckYDimension + padding * 2}`
-    // Invert Y-axis by setting min-y to negative of deckYDimension
+    const PADDING = 20
+    wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
+      viewBoxOriginY - PADDING
+    } ${deckXDimension + PADDING * 2} ${deckYDimension + PADDING * 2}`
   }
-  console.log('wholeDeckViewBox', wholeDeckViewBox)
-  console.log('viewBox', viewBox)
-  console.log(viewBox || wholeDeckViewBox)
   return (
     <Flex
       width="100%"

diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
@@ -18,7 +18,9 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
   StyledText,
+  TYPOGRAPHY,
 } from '@opentrons/components'
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import * as labwareIngredActions from '../../labware-ingred/actions'
 import type { ThunkDispatch } from '../../types'
@@ -46,7 +48,6 @@ export function LiquidsOverflowMenu(
       zIndex={5}
       right={location.pathname === '/liquids' ? SPACING.spacing12 : '3.125rem'}
       top={`calc(${NAV_HEIGHT} - 6px)`}
-      whiteSpace={NO_WRAP}
       ref={overflowWrapperRef}
       borderRadius={BORDERS.borderRadius8}
       boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
@@ -56,6 +57,7 @@ export function LiquidsOverflowMenu(
         e.preventDefault()
         e.stopPropagation()
       }}
+      width="9.375rem"
     >
       {liquids.map(({ name, displayColor, ingredientId }) => {
         return (
@@ -70,7 +72,15 @@ export function LiquidsOverflowMenu(
           >
             <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
               <LiquidIcon color={displayColor ?? ''} />
-              <StyledText desktopStyle="bodyDefaultRegular">{name}</StyledText>
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                css={`
+                  ${LINE_CLAMP_TEXT_STYLE(3)}
+                  text-align: ${TYPOGRAPHY.textAlignLeft}
+                `}
+              >
+                {name}
+              </StyledText>
             </Flex>
           </MenuButton>
         )
@@ -87,7 +97,7 @@ export function LiquidsOverflowMenu(
         }}
         key="defineLiquid"
       >
-        <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
+        <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
           <Icon name="plus" size="1rem" />
           <StyledText desktopStyle="bodyDefaultRegular">
             {t('define_liquid')}