diff options
| author | Chris Swithinbank | 2024-02-06 15:09:26 +0100 |
|---|---|---|
| committer | GitHub | 2024-02-06 15:09:26 +0100 |
| commit | 4741cccc8adbef500bcaf95416a1c61a90761c06 (patch) | |
| tree | 2a9d0e39a3507389df7b4b4575f649dc0028ae5c | |
| parent | 2e17880957d1aae2a84c77500afa9b66e5292a6a (diff) | |
| download | IT.starlight-4741cccc8adbef500bcaf95416a1c61a90761c06.tar.gz IT.starlight-4741cccc8adbef500bcaf95416a1c61a90761c06.tar.bz2 IT.starlight-4741cccc8adbef500bcaf95416a1c61a90761c06.zip | |
Fix overflow of long site titles on narrow viewports (#1462)
| -rw-r--r-- | .changeset/four-fishes-clean.md | 5 | ||||
| -rw-r--r-- | packages/starlight/components/Header.astro | 7 | ||||
| -rw-r--r-- | packages/starlight/components/SiteTitle.astro | 3 |
3 files changed, 11 insertions, 4 deletions
diff --git a/.changeset/four-fishes-clean.md b/.changeset/four-fishes-clean.md new file mode 100644 index 00000000..58cfbac1 --- /dev/null +++ b/.changeset/four-fishes-clean.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes overflow of very long site titles on narrow viewports diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro index 06f6695e..87b97fb1 100644 --- a/packages/starlight/components/Header.astro +++ b/packages/starlight/components/Header.astro @@ -16,7 +16,7 @@ const shouldRenderSearch = --- <div class="header sl-flex"> - <div class="sl-flex"> + <div class="title-wrapper sl-flex"> <SiteTitle {...Astro.props} /> </div> <div class="sl-flex"> @@ -39,6 +39,11 @@ const shouldRenderSearch = height: 100%; } + .title-wrapper { + /* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */ + overflow: hidden; + } + .right-group, .social-icons { gap: 1rem; diff --git a/packages/starlight/components/SiteTitle.astro b/packages/starlight/components/SiteTitle.astro index 4037b6e0..6f6fc9ed 100644 --- a/packages/starlight/components/SiteTitle.astro +++ b/packages/starlight/components/SiteTitle.astro @@ -38,9 +38,6 @@ const href = formatPath(Astro.props.locale || '/'); <style> .site-title { - justify-self: flex-start; - max-width: 100%; - overflow: hidden; align-items: center; gap: var(--sl-nav-gap); font-size: var(--sl-text-h4); |