diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-27 16:05:44 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-27 16:05:44 +0200 |
| commit | 336c97087ab2e0037ec90c524f9d7f8620b9865a (patch) | |
| tree | ed02ea9b4a969cb13c0c7b128928efd6c4e64ae7 /htdocs | |
| parent | ddf1517de9e131e12052fd0c834bba49bc9c77f8 (diff) | |
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.
Diffstat (limited to 'htdocs')
| -rw-r--r-- | htdocs/src/scss/layout/_toolbar.scss | 6 |
1 files changed, 4 insertions, 2 deletions
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 { |