Fix navbar dividers: border-start on the link itself instead of a standalone vr div
deploy / deploy (push) Successful in 10s

The vr utility needs stretch alignment from its flex parent to size
correctly -- inside a plain nav-item li it collapsed/misaligned instead
of showing as a clean vertical rule.
This commit is contained in:
randy committed 2026-09-13 12:18:00 +02:00
1 parent eafea9f728
commit f351212395
1 file changed
+2 -4
+2 -4
View File
@@ -9,9 +9,8 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= 'active' if request.path == '/' %>" href="/">Home</a> <a class="nav-link <%= 'active' if request.path == '/' %>" href="/">Home</a>
</li> </li>
<li class="nav-item"><div class="vr mx-2 my-2"></div></li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= 'active' if request.path.start_with?('/brother') %>" href="/brother">Brother</a> <a class="nav-link border-start ps-3 <%= 'active' if request.path.start_with?('/brother') %>" href="/brother">Brother</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= 'active' if request.path == '/upload' %>" href="/upload">Shipping labels</a> <a class="nav-link <%= 'active' if request.path == '/upload' %>" href="/upload">Shipping labels</a>
@@ -19,9 +18,8 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= 'active' if request.path == '/epson' %>" href="/epson">Receipts</a> <a class="nav-link <%= 'active' if request.path == '/epson' %>" href="/epson">Receipts</a>
</li> </li>
<li class="nav-item"><div class="vr mx-2 my-2"></div></li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= 'active' if request.path.start_with?('/labels') %>" href="/labels">Labels</a> <a class="nav-link border-start ps-3 <%= 'active' if request.path.start_with?('/labels') %>" href="/labels">Labels</a>
</li> </li>
</ul> </ul>
<% if request.path.start_with?('/brother') %> <% if request.path.start_with?('/brother') %>