From 8226ef6594f70b3e01af95e7e030b8faf6b55391 Mon Sep 17 00:00:00 2001 From: Adam Wright Date: Mon, 21 Sep 2026 20:56:45 +0000 Subject: [PATCH] Make the header menu separators solid Review feedback: the dashed lines between dropdown items were not liked, and the reason they stand out is that a dashed rule reads as a placeholder or an editable field rather than as a divider. At 1px the dashes are what the eye lands on instead of the labels. Solid, same colour and weight, so the menu still groups but the separator stops announcing itself. Also removed the rule under the last item in each list, which drew a line across the bottom of the menu with only the list's padding beneath it -- a divider above nothing. That was there before and is the kind of thing that reads as "something is missing below". Desktop only in effect: the mobile breakpoint already removed the nested border, and the top-level bar has no separators at all. Verified by compiling the stylesheet: no dashed rules remain, both borders are solid, and both last-child exceptions are emitted. If the feedback meant no lines at all rather than not-dashed, that is deleting two declarations -- say so and I will. Co-Authored-By: Claude Opus 5 --- .../navigation-bar.component.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/projects/website-angular/src/app/navigation-bar/navigation-bar.component.scss b/projects/website-angular/src/app/navigation-bar/navigation-bar.component.scss index dd3eb96f..932d9b25 100644 --- a/projects/website-angular/src/app/navigation-bar/navigation-bar.component.scss +++ b/projects/website-angular/src/app/navigation-bar/navigation-bar.component.scss @@ -172,8 +172,18 @@ $hamburger-breakpoint: 1100px; .dropdown-item { margin: 0; - border-bottom: 1px dashed var(--outline); + // Solid, not dashed. A dashed rule reads as a placeholder or an editable + // field rather than as a divider, which is what a reviewer picked up on -- + // and at 1px the dashes are what the eye lands on instead of the labels. + border-bottom: 1px solid var(--outline); position: relative; + + // No rule under the last one: it drew a line across the bottom of the menu + // with only the list's padding beneath it, which reads as a divider above + // something that is not there. + &:last-child { + border-bottom: none; + } } .dropdown-link { @@ -256,7 +266,11 @@ $hamburger-breakpoint: 1100px; .nested-dropdown-item { margin: 0; - border-bottom: 1px dashed var(--outline); + border-bottom: 1px solid var(--outline); + + &:last-child { + border-bottom: none; + } } .nested-dropdown-link {