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 | |
| 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.
| -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 { |