From 336c97087ab2e0037ec90c524f9d7f8620b9865a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 27 Oct 2021 16:05:44 +0200 Subject: fix(styles): avoid nav item wrapping With long names (like "About CSS Border Previewer") the button was outside the screen. With flex no wrap, the text can take two lines. --- htdocs/src/scss/layout/_toolbar.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'htdocs/src') diff --git a/htdocs/src/scss/layout/_toolbar.scss b/htdocs/src/scss/layout/_toolbar.scss index 222fb29..00e2bd7 100644 --- a/htdocs/src/scss/layout/_toolbar.scss +++ b/htdocs/src/scss/layout/_toolbar.scss @@ -7,11 +7,12 @@ box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow-dark); color: fun.get-var(color-fg-inverted); display: flex; - flex-flow: row wrap; + flex-flow: row nowrap; gap: fun.get-var(spacing-xs); height: fun.get-var(toolbar-height); justify-content: center; left: 0; + padding: 0 fun.get-var(spacing-sm); position: absolute; right: 0; z-index: 2; @@ -21,7 +22,8 @@ color: fun.get-var(color-fg-inverted); font-size: fun.get-var(font-size-sm); height: 85%; - padding: 0 fun.get-var(spacing-sm); + line-height: inherit; + padding: 0 fun.get-var(spacing-xs); &:hover, &:focus { -- cgit v1.2.3