diff --git a/library/layouts/VerticalTabsLayout.vue b/library/layouts/VerticalTabsLayout.vue index c8f7756d9..f6dedb833 100644 --- a/library/layouts/VerticalTabsLayout.vue +++ b/library/layouts/VerticalTabsLayout.vue @@ -352,14 +352,14 @@ const VTL_SHADOW_CSS = ` .vtl-chev svg { width:15px; height:15px; } .vtl-chev.open { transform:rotate(90deg); } .vtl-rows { display:flex; flex-direction:column; gap:1px; } -/* MATERIAL NAV-ROW METRICS (2026-09-21). Driver: "people are used to the YouTube layout, Google - layout is just way better. We do not need to create custom styles people are not used to." +/* MATERIAL NAV-ROW METRICS (2026-09-21). Product decision: follow the familiar + Material/YouTube list layout rather than custom styling readers are not used to. Measured before this change: 44px rows with an 8px radius. min-height:48px the Material list-item height. min-height, not height, so a wrapping label still grows instead of clipping. border-radius var(--vtl-radius,8px) — SUPERSEDED THE FULL PILL (2026-09-23). The 999px stadium above was a real instruction ("imitate the YouTube - active row") and it shipped. The Driver then measured it against the + active row") and it shipped. It was then measured against the rest of the product and reversed it: "the roundedness of the tabs is a little bit too round because there is nowhere else in the app that has that same roundedness. Even the collapse button is not that round... @@ -841,14 +841,14 @@ export default defineComponent({ .vtl-chev svg { width:15px; height:15px; } .vtl-chev.open { transform:rotate(90deg); } .vtl-rows { display:flex; flex-direction:column; gap:1px; } -/* MATERIAL NAV-ROW METRICS (2026-09-21). Driver: "people are used to the YouTube layout, Google - layout is just way better. We do not need to create custom styles people are not used to." +/* MATERIAL NAV-ROW METRICS (2026-09-21). Product decision: follow the familiar + Material/YouTube list layout rather than custom styling readers are not used to. Measured before this change: 44px rows with an 8px radius. min-height:48px the Material list-item height. min-height, not height, so a wrapping label still grows instead of clipping. border-radius var(--vtl-radius,8px) — SUPERSEDED THE FULL PILL (2026-09-23). The 999px stadium above was a real instruction ("imitate the YouTube - active row") and it shipped. The Driver then measured it against the + active row") and it shipped. It was then measured against the rest of the product and reversed it: "the roundedness of the tabs is a little bit too round because there is nowhere else in the app that has that same roundedness. Even the collapse button is not that round...