Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Alert component does not wrap content when there is not enough space to display it all faceup within a container

See original GitHub issue

Bug Report

Description

This issue can be seen with the following code:

<div style={{width: '50px'}}>
  <Alert type="alert" title="TEST" />
</div>

The text, “TEST” is clipped off out of view when rendered within this div.

Steps to Reproduce

Set width on container that doesnt allow for full width of Alert to be displayed
Add alert component to it that overflows the width of the parent

Additional Context / Screenshots

Screenshot of expected alert Screen Shot 2019-08-21 at 10 28 45 AM

Screenshot of buggy alert Screen Shot 2019-08-21 at 10 28 29 AM Text is clipped out of view

Expected Behavior

The terra alert component handles text wrapping / content overflow appropriately when placed within a container with a set width.

Environment

Component Name and Version: terra-alert

@ Mentions

@dkasper-was-taken

Issue Analytics

State:
Created 4 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

benbcaicommented, Oct 29, 2019

I’m removing the bug label since displaying the alert at such a small width is not the intended or expected use case and such edge case should be resolved by other means.

0reactions

stale[bot]commented, Oct 4, 2021

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed in seven days if no further activity occurs. Thank you for your contributions.