feat(app): make controls component responsive

[koji]

Overview

make controls component responsive + update Play icon.

controls.mov

close AUTH-2481 and RUXD-2624

the protocol name text size will be fixed in a following DQA pr.

Test Plan and Hands on Testing

• click a protocol and go to the protocol details page
• click visualize button
• resize the center columne (Controls) by dragging and dropping the right edge of the left col and the left edge of the right col

Changelog

• replace play icon with the new svg
• update controls css to support responsiveness
• add the basic tests for Controls component
• modify .stylelintrc.js to avoid lint errors from container-queries (this will be fixed by merging stylelint update pr)

Review requests

• What do you need from reviewers to feel confident this PR is ready to merge?
• Ask questions.

Risk assessment

low

[codecov]

Codecov Report

❌ Patch coverage is 2.32558% with 42 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.84%. Comparing base (0c6c7bb) to head (da2ef00).

Files with missing lines	Patch %	Lines
...s/Desktop/ProtocolVisualization/Controls/index.tsx	0.00%	35 Missing ⚠️
.stylelintrc.js	0.00%	7 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             edge   #20115       +/-   ##
===========================================
+ Coverage   25.95%   56.84%   +30.89%     
===========================================
  Files        3560     3560               
  Lines      297775   297883      +108     
  Branches    42127    42309      +182     
===========================================
+ Hits        77277   169336    +92059     
+ Misses     220479   128274    -92205     
- Partials       19      273      +254     

Flag	Coverage Δ
protocol-designer	19.18% <2.32%> (-0.01%)	⬇️

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

Files with missing lines	Coverage Δ
components/src/icons/icon-data.ts	100.00% <100.00%> (ø)
.stylelintrc.js	0.00% <0.00%> (ø)
...s/Desktop/ProtocolVisualization/Controls/index.tsx	2.02% <0.00%> (+2.02%)	⬆️

... and 1767 files with indirect coverage changes

🚀 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.