Improve right sidebar layout (#48)

withastro · May 15, 2023 · a49485d · a49485d
1 parent 5697de7
commit a49485d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/smooth-goats-lick.md 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
@@ -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,14 +26,20 @@
     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);
   }
   @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 🥲 */
+        )
       );
     }
   }