diff --git a/.changeset/smooth-goats-lick.md b/.changeset/smooth-goats-lick.md new file mode 100644 index 00000000000..898b3a30fa6 --- /dev/null +++ b/.changeset/smooth-goats-lick.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Improve right sidebar layout. diff --git a/packages/starlight/components/RightSidebarPanel.astro b/packages/starlight/components/RightSidebarPanel.astro index c96b7a9edb7..d1344c74155 100644 --- a/packages/starlight/components/RightSidebarPanel.astro +++ b/packages/starlight/components/RightSidebarPanel.astro @@ -12,7 +12,7 @@ border-top: 1px solid var(--sl-color-hairline); } .container { - width: var(--sl-sidebar-width); + width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x)); } .right-sidebar-panel :global(h2) { color: var(--sl-color-white); @@ -26,6 +26,7 @@ font-size: var(--sl-text-xs); text-decoration: none; color: var(--sl-color-gray-3); + word-break: break-word; } .right-sidebar-panel :global(a:hover) { color: var(--sl-color-white); @@ -33,7 +34,12 @@ @media (min-width: 72rem) { .container { max-width: calc( - 100vw - var(--sl-content-width) - var(--sl-sidebar-width) + ( + ( + 100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 * + var(--sl-sidebar-pad-x) + ) * 0.25 /* MAGIC NUMBER 🥲 */ + ) ); } }