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.