[CL-524] Ensure story elements do not overflow due to wrapper border

[vleague2]

🎟️ Tracking

CL-524

📔 Objective

There were some diffs showing up for the kitchen sink popover story this past week. The diffs showed a very small shift (a couple pixels) in the placement of elements on the story. After some investigation, I noticed that the story had a teensy bit of overflow in its container, which caused the side nav to scroll slightly when scrolling to the bottom of the main content. This was due to the border present on the story wrapper. This PR changes the box-sizing to account for that border so that stories will not have overflow. This may or may not actually solve the diffs appearing -- my theory is that the popover story specifically had issues with it because the play action that opens the popover causes the page to scroll, but this may not fix the scroll consistency. It will, however, help all the stories that take up the full wrapper space to fit better inside those wrapper containers.

📸 Screenshots

When viewing these videos, watch the side nav.

Before:

Screen.Recording.2025-02-11.at.9.43.24.AM.mov

After:

Screen.Recording.2025-02-11.at.9.42.53.AM.mov

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 35.29%. Comparing base (2284fe3) to head (6154232).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #13348   +/-   ##
=======================================
  Coverage   35.29%   35.29%           
=======================================
  Files        3124     3124           
  Lines       92483    92483           
  Branches    16818    16818           
=======================================
+ Hits        32638    32645    +7     
+ Misses      57388    57381    -7     
  Partials     2457     2457           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Checkmarx One – Scan Summary & Details – 8ee4f45c-cc88-4301-a56e-40eb459a3eea

Great job, no security vulnerabilities found in this Pull Request

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud