Polish

apps/studio/components/interfaces/Explorer/ExplorerNotebookPrintHeader.tsx

@@ -0,0 +1,33 @@
+import dayjs from 'dayjs'
+
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+
+interface ExplorerNotebookPrintHeaderProps {
+  name: string
+}
+
+export const ExplorerNotebookPrintHeader = ({ name }: ExplorerNotebookPrintHeaderProps) => {
+  const { data: project } = useSelectedProjectQuery()
+
+  return (
+    <div className="hidden print:block mb-6 max-w-xl mx-auto px-3.5">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-1.5">
+            <img src="/img/supabase-logo.svg" alt="" className="h-4 w-4" />
+            <span className="text-sm font-medium text-foreground">Supabase</span>
+          </div>
+          <p className="text-[10px] uppercase tracking-wide text-foreground-lighter mt-0.5">
+            Explorer Notebook
+          </p>
+        </div>
+        <div className="text-right text-xs text-foreground-lighter">
+          <p className="font-medium text-foreground">{name}</p>
+          <p>Project: {project?.name}</p>
+          <p>Exported {dayjs().format('MMM D, YYYY')}</p>
+        </div>
+      </div>
+      <div className="border-t-2 border-brand my-3" />
+    </div>
+  )
+}

apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx

@@ -14,6 +14,7 @@ import {
 import { acceptUntrustedSql } from '@supabase/pg-meta'
 import { useQueryClient } from '@tanstack/react-query'
 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
+import dayjs from 'dayjs'
 import {
   Check,
   Copy,
@@ -48,6 +49,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
+import { ExplorerNotebookPrintHeader } from './ExplorerNotebookPrintHeader'
 import {
   findQueryCellsMatchingSql,
   isMutatingSql,
@@ -82,6 +84,7 @@ import {
 import { useUpsertNotebookMutation } from '@/data/content/notebooks/notebook-upsert-mutation'
 import { acceptUntrustedLogsSql } from '@/data/logs/safe-analytics-sql'
 import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import {
   getNotebooksStateSnapshot,
   useCurrentNotebook,
@@ -104,6 +107,8 @@ export const ExplorerNotebookTab = () => {
     true
   )
 
+  const { data: project } = useSelectedProjectQuery()
+
   const currentNotebook = useCurrentNotebook()
   const { name, content } = currentNotebook?.notebook ?? {}
   const { isNotFound } = useLoadNotebook({ id, projectRef: ref })
@@ -471,7 +476,10 @@ export const ExplorerNotebookTab = () => {
         ref={scrollContainerRef}
         className="w-full mx-auto flex-grow min-h-0 overflow-y-auto print:h-auto print:overflow-visible"
       >
-        <div className="p-4 pb-10">
+        <div className="p-4 pb-10 print:pt-0 print:pb-0">
+          {/* [Joshen] This is meant to only render when printing the notebook */}
+          <ExplorerNotebookPrintHeader name={name ?? ''} />
+
           {cells.length === 0 && (
             <EmptyStatePresentational
               icon={<Notebook className="text-foreground-lighter" />}

apps/studio/components/ui/SortableSection.tsx

@@ -69,7 +69,7 @@ export const SortableSection = ({
     <div
       ref={setNodeRef}
       style={style}
-      className="group relative will-change-transform flex w-full items-start gap-x-4 min-w-0"
+      className="group relative will-change-transform flex w-full items-start gap-x-4 min-w-0 print:break-inside-avoid"
     >
       <div className={cn('flex items-center', gripClassName)}>
         {actions}

apps/studio/styles/globals.css

@@ -187,6 +187,16 @@ body,
   box-sizing: border-box;
 }
 
+/* Padding on an in-DOM container only applies once (at the start/end of the
+ * box), not on every printed page it spans, so continuation pages fell back
+ * to whatever margin the print dialog happened to have. Setting only the
+ * vertical page margin here applies it uniformly to every page's top/bottom,
+ * without touching page width or the dialog's own left/right margin. */
+@page {
+  padding-top: 0.5in;
+  padding-bottom: 0.5in;
+}
+
 @media print {
   #panel-content,
   #panel-project-content {