fix: indent guides causes 1px drift in word wrapped lines

[abose]

Users reported that deeply indented HTML elements caused misalignment between the text inside elements and their corresponding tags. The issue worsened as indentation depth increased, resulting in a noticeable shift of approximately one or two spaces at deep indentation levels.

Closes

Fixes https://github.com/orgs/phcode-dev/discussions/2108

Root Cause

Previously, the .cm-phcode-indent-guides::before selector was used to create indent guides via a border-left:

.cm-phcode-indent-guides::before {
    content: " ";
    width: 1px;
    display: inline-block;
    position: relative;
    border-left: 1px solid rgba(128, 128, 128, 0.3);
}

However, this approach added a 1px tax per indentation level, meaning that each additional indent slightly shifted the text outward. The cumulative effect of this offset became more noticeable with deeper indentation.

Fix

Replaced the border-left approach with an inset box-shadow, which does not affect inline layout calculations but still visually maintains the indentation guides:

.cm-phcode-indent-guides {
    box-shadow: inset 1px 0 0 rgba(128, 128, 128, 0.3);
}

This ensures:

• No extra inline width tax per indentation level.
• The indentation guides remain visually identical.
• The text inside elements remains properly aligned regardless of depth.

Testing

• Verified that indentation no longer misaligns text at deep levels.
• Ensured indent guides still render correctly.
• Checked that line wrapping behavior remains unaffected.
• Since this is a css change for visual verification, automated tests not written as not possible, except maybe with ai image recognition in the future.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud