Using outline instead of border to avoid the layout to shift

[verlok]

Summary

This PR replaces the use of a border for the highlight effect with an outline. The primary goal is to achieve a visually similar highlight effect (5px solid lime) while avoiding layout shifts that occur when using borders.

Details

• Avoiding Layout Shift:
  Borders are part of the element’s box model. When a border is applied, it increases the element’s total dimensions, which can cause surrounding elements to shift or reflow. This is particularly problematic in dynamic layouts or when toggling states, as it may lead to an inconsistent user experience.
• Outline Benefits:
  Outlines, on the other hand, are not included in the box model. They are drawn on top of the element without affecting its dimensions. This means that applying an outline will not cause any layout reflows or shifts, ensuring that the UI remains stable regardless of whether the highlight is active or not.

Implementation:

The CSS changes include:

.highlight-element {
  outline: 5px solid lime;
  outline-offset: -5px;
}

The outline-offset: -5px is used here to simulate the effect of an inner highlight, ensuring that the outline appears inside the element, giving it a “highlight-y” effect without modifying its size.

Impact

By using an outline instead of a border, this update:

• Prevents unwanted layout shifts that can disrupt debugging.
• Provides a clean and maintainable way to add highlights without side effects on the element’s dimensions.

Let me know if any further adjustments are needed.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
webperf-snippets	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 6:04pm
webperf-snippets-u6am	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 6:04pm

[vercel]

@verlok is attempting to deploy a commit to the nucliweb's projects Team on Vercel.

A member of the Team first needs to authorize it.

[nucliweb]

Thank you @verlok 🫶