FE.UX-Common CSS boundary situation defense processing

Following this mentality will at least reduce the problems you may encounter.

For this component, the title can be one word or multiple words. To prevent the title from getting stuck on the icon on the right, it is better to add margin-right: 1rem to prevent the title from becoming longer.

If one button is adjacent to another button, add a left margin for the second button just in case

.button + .button {
  margin-left: 1rem;
}

The first solution is to use text truncation & max-width. The second one only uses max-width, but if the label has a long text, it may fail.

Image default background

img {
  background-color: #525252;
}

object-fit: cover Avoid avatar stretching

flex-wrap to avoid element overflow

Text truncation + right margin

overscroll-behavior-y: contain; avoid parent element scrolling together

The css variable sets the calc(100% - var(--actions-width, 70px))

Use min-height instead of height

Similarly, replace width with min-width .

Don't forget background-repeat

When the title has a very long word, it will not wrap.
Even if we use overflow-wrap: break-word , it doesn't work.
To change this default behavior, we need min-width set the flex item to 0 . That's because min-width default is auto , an overflow occurs.
The same thing applies to the column flex wrapper, we use min-height: 0 .

.card {
    display: flex;
}
.card__title {
    overflow-wrap: break-word;
    min-width: 0;
}

Split selector
Invalid below

/* Don't do this, please */
input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #222;
}

Correct writing

input::-webkit-input-placeholder {
    color: #222;
}

input:-moz-placeholder {
    color: #222;
}

Some progressive enhancements:

• gap
• @media
• scrollbar-gutter
• minmax()
• sticky

Reference

• Defensive CSS
• The Just in Case Mindset in CSS