diff options
| author | Julien Déramond | 2023-10-24 19:49:23 +0200 |
|---|---|---|
| committer | GitHub | 2023-10-24 19:49:23 +0200 |
| commit | 1e517d92a4cf146d2dcae58f7c4299d6f25ea73e (patch) | |
| tree | 24df88419644ee54e8fc9d24cc2db7c514c8d910 | |
| parent | faf096c8e21d1c85e503956765f53a102283efde (diff) | |
| download | IT.starlight-1e517d92a4cf146d2dcae58f7c4299d6f25ea73e.tar.gz IT.starlight-1e517d92a4cf146d2dcae58f7c4299d6f25ea73e.tar.bz2 IT.starlight-1e517d92a4cf146d2dcae58f7c4299d6f25ea73e.zip | |
fix: prevent text from overflowing prev/next links (#814)
| -rw-r--r-- | .changeset/tasty-garlics-dress.md | 5 | ||||
| -rw-r--r-- | packages/starlight/components/Pagination.astro | 10 |
2 files changed, 13 insertions, 2 deletions
diff --git a/.changeset/tasty-garlics-dress.md b/.changeset/tasty-garlics-dress.md new file mode 100644 index 00000000..c7c1bc35 --- /dev/null +++ b/.changeset/tasty-garlics-dress.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Prevent text from overflowing pagination items diff --git a/packages/starlight/components/Pagination.astro b/packages/starlight/components/Pagination.astro index 2b66ced5..72dc8df3 100644 --- a/packages/starlight/components/Pagination.astro +++ b/packages/starlight/components/Pagination.astro @@ -9,7 +9,7 @@ const isRtl = dir === 'rtl'; const t = useTranslations(locale); --- -<div class="pagination-links sl-flex" dir={dir}> +<div class="pagination-links" dir={dir}> { prev && ( <a href={prev.href} rel="prev"> @@ -38,7 +38,8 @@ const t = useTranslations(locale); <style> .pagination-links { - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; } @@ -56,6 +57,7 @@ const t = useTranslations(locale); text-decoration: none; color: var(--sl-color-gray-2); box-shadow: var(--sl-shadow-md); + overflow-wrap: anywhere; } [rel='next'] { justify-content: end; @@ -71,4 +73,8 @@ const t = useTranslations(locale); font-size: var(--sl-text-2xl); line-height: var(--sl-line-height-headings); } + + svg { + flex-shrink: 0; + } </style> |