fix(protocol-designer): fix slot details width and OT-2 deck view size

[koji]

Overview

fix slot details width and OT-2 deck view size

close AUTH-1505

Test Plan and Hands on Testing

OT-2

1. create or import an OT-2 protocol
2. go to edit protocol
3. check the followings
   for zoom, the zoomed slot size is the same as production/8.4.3

• starting deck
• zoom (clicking a slot)
• protocol steps

Flex

1. create or import a Flex protocol
2. go to edit protocol
3. check the followings
   for zoom, the zoomed slot size is the same as production/8.4.3

• starting deck
• zoom (clicking a slot)
• protocol steps

Changelog

Review requests

Risk assessment

mid

[codecov]

Codecov Report

Attention: Patch coverage is 86.90476% with 11 lines in your changes missing coverage. Please review.

Project coverage is 18.63%. Comparing base (24399e0) to head (9cc15be).
Report is 1 commits behind head on chore_release-pd-8.4.3.

Files with missing lines	Patch %	Lines
...rc/pages/Designer/DeckSetup/DeckSetupContainer.tsx	67.64%	11 Missing ⚠️

Additional details and impacted files

@@                    Coverage Diff                     @@
##           chore_release-pd-8.4.3   #17640      +/-   ##
==========================================================
+ Coverage                   18.62%   18.63%   +0.01%     
==========================================================
  Files                        2743     2744       +1     
  Lines                      211801   211832      +31     
  Branches                     6534     6539       +5     
==========================================================
+ Hits                        39442    39475      +33     
+ Misses                     172359   172357       -2     

Flag	Coverage Δ
protocol-designer	18.63% <86.90%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...s/Designer/DeckSetup/HoverSlotDetailsContainer.tsx	100.00% <100.00%> (ø)
...col-designer/src/pages/Designer/DeckSetup/utils.ts	46.99% <100.00%> (+1.64%)	⬆️
...rc/pages/Designer/DeckSetup/DeckSetupContainer.tsx	73.20% <67.64%> (-0.96%)	⬇️

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[koji]

support 5 cases (except OT-2 Deck + Protocol Steps)

[koji]

the previous commit used fixed viewBox for OT-2 + protocol steps but it needed to pass additional prop to the component that made the component messy.

actually this is not a good way but it would be better to make the component messy and OT-2 + protocol steps has the container size limitation.
if you have any better idea, please let me know.

[ncdiehl11]

This looks mostly good, but I notice a few things

1. For OT-2, there is a lot of white space above the robot space in the SVG. Is the viewbox correct?

2. For both Flex and OT-2, there is 120px top padding in Protocol Steps view. Is this intentional?

3. Looks like Protocol Steps view still scrolls unintentionally. That may be outside of the scope of this PR though.
   https://github.com/user-attachments/assets/c5523d6a-f089-4a36-ad40-e9c987155dea

[koji]

This looks mostly good, but I notice a few things

1. For OT-2, there is a lot of white space above the robot space in the SVG. Is the viewbox correct?

2. For both Flex and OT-2, there is 120px top padding in Protocol Steps view. Is this intentional? 3. Looks like Protocol Steps view still scrolls unintentionally. That may be outside of the scope of this PR though. https://github.com/user-attachments/assets/c5523d6a-f089-4a36-ad40-e9c987155dea

For no.1
I avoid touching viewBox for this pr because avoid breaking zoom functions.

For no.2,
I think I added that padding to align the layout with the desing in the previous deck view pr.

For no.3,
that came from vh in Timeline and that has been scooped out from 8.4.3. i think the ticket is in backlog.

[ncdiehl11]

To confirm, are we leaving the scroll issue alone for now? If so, good to merge from me

[koji]

To confirm, are we leaving the scroll issue alone for now? If so, good to merge from me

yeah, i checked the space between nav and the top of deck view and need to keep the currnet for displaying error message.
I'm planning to create a new component for displaying deck view for Protocol Steps since right now I use util function to change width to handle svg size with tab and robotType.
the update will be in 8.5.0