fix(AlertBox): title shouldn't shrink to fit content #7985
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
I'm working on the Storybook tests. |
github-actions
bot
removed
the
github_actions:pull-request
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a styling issue with the AlertBox component's title by ensuring proper layout on smaller screens. The title was wrapping unexpectedly when space was constrained.
- Adds CSS styling to prevent the AlertBox title from wrapping by applying
min-w-max - Introduces a new Storybook story to test the AlertBox component in a constrained width scenario
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ui-components/src/Common/AlertBox/index.module.css | Adds .title class with min-w-max styling to prevent title wrapping |
| packages/ui-components/src/Common/AlertBox/index.stories.tsx | Adds SmallWindows story to demonstrate AlertBox behavior in constrained width containers |
Comments suppressed due to low confidence (1)
packages/ui-components/src/Common/AlertBox/index.stories.tsx:108
- [nitpick] The story name 'SmallWindows' is ambiguous. Consider a more descriptive name like 'ConstrainedWidth' or 'NarrowContainer' that better describes what this story is testing.
export const SmallWindows: Story = {
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #7985 +/- ##
==========================================
+ Coverage 73.10% 73.13% +0.03%
==========================================
Files 95 95
Lines 8355 8354 -1
Branches 219 218 -1
==========================================
+ Hits 6108 6110 +2
+ Misses 2246 2243 -3
Partials 1 1 ☔ View full report in Codecov by Sentry. |
avivkeller
changed the title
| @@ -104,3 +104,24 @@ export default { | |||
| }, | |||
| }, | |||
| } as Meta; | |||
|
|
|||
| export const SmallWindows: Story = { | |||
There was a problem hiding this comment.
Maybe something like "smallcontainer" because windows is strange
github-actions
bot
removed
the
github_actions:pull-request
|
There's no need for a small window story, Chromatic automatically snapshots every story in both a mobile and desktop mode... Or is that not enough? Do we need a 3rd smaller desktop one? |
Description
I fix the bug #7983 with @bjohansebas
Validation
Related Issues
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.