diff --git a/README.md b/README.md
index b0ed583..695b8be 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,12 @@ Key principles:
3. Open [http://localhost:5173](http://localhost:5173).
+## Print stylesheet
+
+Added `src/styles/print.css` to hide UI chrome and expand collapsible
+sections when printing the `SortMenu` page. This improves printed output
+by removing interactive controls and making content fully visible. (Closes #708)
+
## Scripts
| Command | Description |
diff --git a/src/main.tsx b/src/main.tsx
index c3c61c3..13f4e90 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
+import "./styles/print.css";
import { ThemeProvider } from "./ThemeContext";
const root = ReactDOM.createRoot(document.getElementById("root")!);
diff --git a/src/pages/SortMenu.test.tsx b/src/pages/SortMenu.test.tsx
new file mode 100644
index 0000000..159b9d0
--- /dev/null
+++ b/src/pages/SortMenu.test.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import SortMenu from "./SortMenu";
+import fs from "fs";
+import path from "path";
+
+describe("SortMenu print behavior", () => {
+ test("renders collapsible sections", () => {
+ render();
+ expect(screen.getByText("Sort Options")).toBeInTheDocument();
+ expect(screen.getByText("Advanced Filters")).toBeInTheDocument();
+ });
+
+ test("print stylesheet exists and contains print rules", () => {
+ const cssPath = path.resolve(__dirname, "../styles/print.css");
+ const css = fs.readFileSync(cssPath, "utf8");
+ expect(css).toMatch(/@media print/);
+ expect(css).toMatch(/\.no-print/);
+ expect(css).toMatch(/details\s*>\s*\*/);
+ });
+});
diff --git a/src/pages/SortMenu.tsx b/src/pages/SortMenu.tsx
new file mode 100644
index 0000000..751b777
--- /dev/null
+++ b/src/pages/SortMenu.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+/**
+ * SortMenu page used for printing tests.
+ * - Contains small amount of UI "chrome" that should be hidden when printing
+ * - Contains collapsible sections which should be expanded when printing
+ */
+export default function SortMenu(): JSX.Element {
+ return (
+
+
+ Sort & Filters
+
+
+
+
+
+
+
+ This chrome is hidden on print (page header, buttons).
+
+
+
+
+ );
+}
diff --git a/src/styles/print.css b/src/styles/print.css
new file mode 100644
index 0000000..e73bcc3
--- /dev/null
+++ b/src/styles/print.css
@@ -0,0 +1,39 @@
+/* Print stylesheet: hide UI chrome and expand collapsibles for printing SortMenu */
+
+@media print {
+ /* Hide application chrome */
+ .no-print,
+ .sort-menu-header,
+ .sort-menu-actions,
+ button.ghost-button,
+ button.primary-button {
+ display: none !important;
+ }
+
+ /* Ensure details-based collapsibles show their content when printing */
+ .sort-collapsible details > * {
+ display: block !important;
+ visibility: visible !important;
+ height: auto !important;
+ overflow: visible !important;
+ }
+
+ /* Hide summary controls when printing to avoid duplicate controls */
+ .sort-collapsible summary {
+ display: none !important;
+ }
+
+ /* Make printed text clear and use light color scheme for consistent prints */
+ html, body {
+ background: #fff !important;
+ color: #000 !important;
+ -webkit-print-color-adjust: exact !important;
+ print-color-adjust: exact !important;
+ }
+
+ /* Remove any unnecessary outlines/box-shadows that don't print well */
+ * {
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+}