fix: misaligned tables

[emilyjablonski]

Description

After some investigation, the reason we are seeing misalignment in core in tables (to the right instead of the left) and not in deployed environments after the upgrade is an issue of CSS precedence. We currently have the desktop styles first under a media query, and then the mobile styles. The mobile styles just override the desktop ones as they come later.

However, I'm not clear why this is not a regression in Storybook. I'm wondering if there is some sort of Storybook CSS config that we just need to pull over to core?

How Can This Be Tested/Reviewed?

I used yarn link:uic locally to test out this change and ensure it works. I also checked for every other instance of a media query to see if we were inappropriately ordering the default styles after, and didn't see any other use cases.

Checklist:

• My code follows the style guidelines of this project
• I have added QA notes to the issue
• I have performed a self-review of my own code
• I have reviewed the changes in a desktop view
• I have reviewed the changes in a mobile view
• I have made any corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• I have added or updated stories if new changes are not captured in Storybook
• New and existing unit tests pass locally with my changes
• I have exported any new pieces added to ui-components
• I have documented this change in the changelog, and any breaking changes are well described

Reviewer Notes:

Steps to review a PR:

• Read and understand the issue, and ensure the author has added QA notes
• Review the code itself from a style point of view
• Either review the Storybook preview or pull the changes down locally and test that the acceptance criteria is met
• Either explicitly ask a clarifying question, request changes, or approve the PR if there are small remaining changes but the PR is otherwise good to go

On merge, squash commits.

[netlify]

✅ Deploy Preview for storybook-bloom-dev ready!

Name	Link
🔨 Latest commit	a91da89
🔍 Latest deploy log	https://app.netlify.com/projects/storybook-bloom-dev/deploys/695d39f10b6bdb0008694013
😎 Deploy Preview	https://deploy-preview-185--storybook-bloom-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ludtkemorgan]

Nice find! This looks good. I'm surprised this was working earlier.

The failed storybook deployment seems like it was just a caching issue with the dependency upgrades. I've retriggered the job, but you might need to do a blank commit for it to be picked up

[jaredcwhite]

@emilyjablonski might be worth trying to update Sass in devDependencies here to match the version in Core?

[emilyjablonski]

Because we're on an old Tailwind version and a newer Sass version it looks like the upgrade is going to require removing the inline Tailwind variables / that that is now incompatible, so I have that work on a separate branch

[github-actions]

🎉 This PR is included in version 13.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀