a few layout fixes for Safari printing viewport

withastro · Jun 9, 2023 · f455c1c · f455c1c
1 parent 04e9c3c
commit f455c1c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/starlight/components/Sidebar.astro b/packages/starlight/components/Sidebar.astro
@@ -12,7 +12,7 @@ interface Props {
 const { sidebar, locale } = Astro.props;
 ---
 
-<div class="sidebar flex">
+<div class="sidebar flex print:hidden">
   <SidebarSublist sublist={sidebar} />
   <div class="mobile-preferences flex md:hidden">
     <ThemeSelect {locale} />

diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro
@@ -15,7 +15,7 @@ const t = useTranslations(locale);
   <header class="header"><slot name="header" /></header>
   {
     hasSidebar && (
-      <nav class="sidebar" aria-label={t('sidebarNav.accessibleLabel')}>
+      <nav class="sidebar print:hidden" aria-label={t('sidebarNav.accessibleLabel')}>
         <MobileMenuToggle {locale} />
         <div id="starlight__sidebar" class="sidebar-pane">
           <div class="sidebar-content">
@@ -89,4 +89,10 @@ const t = useTranslations(locale);
       border-inline-end: 1px solid var(--sl-color-hairline-shade);
     }
   }
+
+  @media print {
+    .main-frame {
+      padding-inline-start: 0 !important;
+    }
+  }
 </style>
diff --git a/packages/starlight/layout/TwoColumnContent.astro b/packages/starlight/layout/TwoColumnContent.astro
@@ -7,7 +7,7 @@ interface Props {
 <div class="lg:flex">
   {
     Astro.props.hasToC && (
-      <aside class="right-sidebar-container">
+      <aside class="right-sidebar-container print:hidden">
         <div class="right-sidebar">
           <slot name="right-sidebar" />
         </div>
@@ -53,4 +53,11 @@ interface Props {
       );
     }
   }
+
+  @media print {
+    .main-pane {
+      --sl-sidebar-width: 0px;
+      --sl-content-width: 100%;
+    }
+  }
 </style>