fix(app): fix the background styling for svgs in slot details (#20301)

* fix(app): fix the background styling for svgs in slot details

Author: koji

…olVisualization/LabwareSlotContainer.tsx …alization/LabwareSlotContainer/index.tsxapp/src/organisms/Desktop/ProtocolVisualization/LabwareSlotContainer.tsx renamed to app/src/organisms/Desktop/ProtocolVisualization/LabwareSlotContainer/index.tsx app/src/organisms/Desktop/ProtocolVisualization/LabwareSlotContainer.tsx renamed to app/src/organisms/Desktop/ProtocolVisualization/LabwareSlotContainer/index.tsx

@@ -15,10 +15,10 @@ import {
   wellFillFromWellContents,
 } from '@opentrons/step-generation'
 
+import { getAllWellContentsAtFrame } from '../utils/getAllWellContentsAtFrame'
+import { WellContainer } from '../WellContainer'
+import { WellTooltip } from '../WellTooltip'
 import styles from './labwareslotcontainer.module.css'
-import { getAllWellContentsAtFrame } from './utils/getAllWellContentsAtFrame'
-import { WellContainer } from './WellContainer'
-import { WellTooltip } from './WellTooltip'
 
 import type { WellGroup } from '@opentrons/components'
 import type { Liquid, RunTimeCommand } from '@opentrons/shared-data'

app/src/organisms/Desktop/ProtocolVisualization/LabwareSlotContainer/labwareslotcontainer.module.css

@@ -0,0 +1,70 @@
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: var(--spacing-12);
+  border-radius: var(--border-radius-8);
+  background-color: var(--white);
+  container-name: labware-slot-container;
+  container-type: inline-size;
+  gap: var(--spacing-8);
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* basic padding is 12px because of the default width */
+.main_content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-12);
+  border-radius: var(--border-radius-4);
+  background-color: var(--grey-10);
+}
+
+.info_label_container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.labware_render_container {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Width 172px up to 299px */
+@container labware-slot-container (min-width: 172px) and (max-width: 299px) {
+  .main_content {
+    padding: var(--spacing-12);
+  }
+}
+
+/* Width 300px up to 449px */
+@container labware-slot-container (min-width: 300px) and (max-width: 449px) {
+  .main_content {
+    padding: var(--spacing-20);
+  }
+}
+
+/* Width 450px up to 599px */
+@container labware-slot-container (min-width: 450px) and (max-width: 599px) {
+  .main_content {
+    padding: var(--spacing-32);
+  }
+}
+
+/* Width 600px and up */
+@container labware-slot-container (min-width: 600px) {
+  .main_content {
+    padding: var(--spacing-40);
+  }
+}

…rotocolVisualization/ModuleContainer.tsx …lVisualization/ModuleContainer/index.tsxapp/src/organisms/Desktop/ProtocolVisualization/ModuleContainer.tsx renamed to app/src/organisms/Desktop/ProtocolVisualization/ModuleContainer/index.tsx app/src/organisms/Desktop/ProtocolVisualization/ModuleContainer.tsx renamed to app/src/organisms/Desktop/ProtocolVisualization/ModuleContainer/index.tsx

@@ -12,8 +12,8 @@ import {
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
+import { ModuleStatusContainer } from '../ModuleStatusContainer'
 import styles from './modulecontainer.module.css'
-import { ModuleStatusContainer } from './ModuleStatusContainer'
 
 import type { ModuleEntities, RobotState } from '@opentrons/step-generation'
 

…Visualization/modulecontainer.module.css …duleContainer/modulecontainer.module.cssapp/src/organisms/Desktop/ProtocolVisualization/modulecontainer.module.css renamed to app/src/organisms/Desktop/ProtocolVisualization/ModuleContainer/modulecontainer.module.css app/src/organisms/Desktop/ProtocolVisualization/modulecontainer.module.css renamed to app/src/organisms/Desktop/ProtocolVisualization/ModuleContainer/modulecontainer.module.css

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 
 import { StyledText } from '@opentrons/components'
 
-import styles from './modulecontainer.module.css'
+import styles from './ModuleContainer/modulecontainer.module.css'
 
 interface ModuleStatusContainerProps {
   title: string

app/src/organisms/Desktop/ProtocolVisualization/ModuleStatusContainer.tsx

@@ -3,20 +3,20 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 
-import { LabwareSlotContainer } from '../LabwareSlotContainer'
-import { PipetteContainer } from '../PipetteContainer'
-import { StepDetailContainer } from '../StepDetailContainer'
-import { TipDisposalContainer } from '../TipDisposalContainer'
-import { TipPickupContainer } from '../TipPickupContainer'
+import { LabwareSlotContainer } from '../../LabwareSlotContainer'
+import { PipetteContainer } from '../../PipetteContainer'
+import { StepDetailContainer } from '../../StepDetailContainer'
+import { TipDisposalContainer } from '../../TipDisposalContainer'
+import { TipPickupContainer } from '../../TipPickupContainer'
 
 import type { ComponentProps } from 'react'
 import type { RunTimeCommand } from '@opentrons/shared-data'
 import type { InvariantContext, RobotState } from '@opentrons/step-generation'
 
-vi.mock('../PipetteContainer')
-vi.mock('../TipDisposalContainer')
-vi.mock('../TipPickupContainer')
-vi.mock('../LabwareSlotContainer')
+vi.mock('../../PipetteContainer')
+vi.mock('../../TipDisposalContainer')
+vi.mock('../../TipPickupContainer')
+vi.mock('../../LabwareSlotContainer')
 
 const render = (props: ComponentProps<typeof StepDetailContainer>) => {
   return renderWithProviders(<StepDetailContainer {...props} />)