The Two-Line CSS Fix That Wasn't Quite Right the First Time

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.

Project Overview

Mozilla Firefox - specifically the Split View about:opentabs page, which lets users search and manage open tabs. I contribute to Firefox through Outreachy.

Bug Fix or Performance Improvement

In the Split View search field, long strings were overflowing outside their container instead of wrapping inside it. Visually, the layout broke - text spilled past its boundary instead of staying contained within the card component. This is Bug 2026574.

Code

My first patch targeted the heading element directly in moz-card.css:

.moz-card-heading {
  overflow-wrap: break-word;
  min-width: 0;
}

This technically fixed the visible symptom. My reviewer, Tim Giles, suggested a more precise fix applied to the parent component instead:

.moz-card {
  overflow-wrap: anywhere;
}

My Improvements

overflow-wrap: anywhere is more aggressive than break-word - it allows line breaks at any point when needed to prevent overflow, not only at existing break opportunities like spaces or hyphens. Moving the rule to .moz-card instead of just the heading also meant the fix covered the whole component robustly, rather than patching one specific element and leaving the same overflow risk elsewhere in the card. It ended up being a smaller diff that solved the actual problem instead of the symptom I'd initially focused on, and it matched patterns already used elsewhere in the codebase - which matters in a project the size of Firefox, where consistency makes future maintenance easier for everyone who touches that file after you.

The patch landed in Firefox Nightly on April 7, 2026. I'm Rosemary, a self-taught full-stack developer from Nigeria, contributing to Mozilla Firefox through Outreachy. You can find my other work on GitHub.

Top comments (0)