@open-press/core 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-press/core",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "description": "open-press core — runtime primitives, CLI, and render pipeline for AI-first fixed-layout documents.",
   "license": "MIT",

package/src/openpress/app/OpenPressApp.tsx

@@ -221,16 +221,27 @@ export function OpenPressApp() {
   const presentationSlug = state.activeSlug || currentRouteFromLocation().slug;
   const openPresentation = state.document.meta.type === "slides" && presentationSlug
     ? (pageIndex: number) => {
+        // requestFullscreen must be called synchronously within the user gesture.
+        // window.open() creates a new browsing context, so the user gesture is lost
+        // and the browser blocks fullscreen. Navigate in-place instead.
+        const root = globalThis.document?.documentElement;
+        if (root?.requestFullscreen) void root.requestFullscreen().catch(() => {});
         const slug = normalizeSlug(presentationSlug);
-        const pathname = slug ? `/${slug}` : "/";
-        const hash = `#page-${String(pageIndex + 1).padStart(2, "0")}`;
-        window.open(`${pathname}?fullscreen=1${hash}`, "_blank", "noopener,noreferrer");
+        pushPressRoute(slug, "present", pageIndex);
+        setState((latest) => latest.status === "ready"
+          ? { ...latest, runtimeMode: "present" }
+          : latest);
       }
     : undefined;
 
   const exitPresentation = state.document.meta.type === "slides"
     ? (pageIndex: number) => {
         if (state.status !== "ready") return;
+        // Exit fullscreen before returning to the workbench.
+        const activeDoc = globalThis.document;
+        if (activeDoc?.fullscreenElement && activeDoc?.exitFullscreen) {
+          void activeDoc.exitFullscreen().catch(() => {});
+        }
         const slug = state.activeSlug || currentRouteFromLocation().slug;
         if (slug) pushPressRoute(slug, "preview", pageIndex);
         setState((latest) => latest.status === "ready"

package/src/openpress/app/WorkspaceGalleryPage.tsx

@@ -1,49 +1,90 @@
 import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
 import type { HtmlPageBlock, ReaderDocument, WorkspaceManifest, WorkspaceManifestPress } from "../document-model";
 
+type GalleryFilter = "all" | "pages" | "slides";
+
 interface Props {
   manifest: WorkspaceManifest;
-  // Called when the reader navigates into a specific Press. The host
-  // is responsible for routing (history.pushState, hash, etc.); the
-  // gallery just emits the chosen slug.
   onSelectPress: (press: WorkspaceManifestPress) => void;
 }
 
-// Reader landing page for multi-Press workspaces. Shows a Figma-style
-// uniform-grid card per Press; each card lazily loads that Press's
-// document.json and renders the first page as a thumbnail preview.
-// Single-Press workspaces skip the gallery entirely.
 export function WorkspaceGalleryPage({ manifest, onSelectPress }: Props) {
   const heading = manifest.name ?? "Workspace";
-  const pressCount = String(manifest.presses.length).padStart(2, "0");
+  const [filter, setFilter] = useState<GalleryFilter>("all");
+
+  const counts = {
+    all: manifest.presses.length,
+    pages: manifest.presses.filter((p) => p.type === "pages").length,
+    slides: manifest.presses.filter((p) => p.type === "slides").length,
+  };
+
+  const visiblePresses = filter === "all"
+    ? manifest.presses
+    : manifest.presses.filter((p) => p.type === filter);
 
   return (
     <main className="openpress-workspace-gallery" aria-labelledby="workspace-gallery-heading">
       <header className="openpress-workspace-gallery__header">
         <div className="openpress-workspace-gallery__headline">
-          <p className="openpress-workspace-gallery__eyebrow">Workspace</p>
+          <p className="openpress-workspace-gallery__brand">
+            <span className="openpress-workspace-gallery__brand-mark">open-press</span>
+            <span className="openpress-workspace-gallery__brand-sep" aria-hidden="true">/</span>
+            <span className="openpress-workspace-gallery__eyebrow">Workspace</span>
+          </p>
           <h1 id="workspace-gallery-heading">{heading}</h1>
         </div>
-        <p className="openpress-workspace-gallery__count">
-          <span>{pressCount}</span>
-          <small>{manifest.presses.length === 1 ? "document" : "documents"}</small>
-        </p>
       </header>
 
-      <ul className="openpress-workspace-gallery__grid" role="list">
-        {manifest.presses.map((press) => (
-          <li key={press.slug || "root"} className="openpress-workspace-gallery__item">
-            <PressCard press={press} onSelect={() => onSelectPress(press)} />
-          </li>
-        ))}
-      </ul>
+      <div className="openpress-workspace-gallery__body">
+        <nav className="openpress-workspace-gallery__sidebar" aria-label="文件類型篩選">
+          <FilterButton label="All" count={counts.all} active={filter === "all"} onClick={() => setFilter("all")} />
+          <FilterButton label="Pages" count={counts.pages} active={filter === "pages"} onClick={() => setFilter("pages")} />
+          <FilterButton label="Slides" count={counts.slides} active={filter === "slides"} onClick={() => setFilter("slides")} />
+        </nav>
+
+        <section className="openpress-workspace-gallery__main" aria-label={`${filter} 文件`}>
+          {visiblePresses.length > 0 ? (
+            <ul className="openpress-workspace-gallery__grid" role="list">
+              {visiblePresses.map((press) => (
+                <li key={press.slug || "root"} className="openpress-workspace-gallery__item">
+                  <PressCard press={press} onSelect={() => onSelectPress(press)} />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="openpress-workspace-gallery__empty">No {filter} documents.</p>
+          )}
+        </section>
+      </div>
     </main>
   );
 }
 
-// Card is a div+role=button (not <button>) so it can contain the
-// rendered page HTML — buttons may only hold phrasing content, and
-// page HTML is block-level.
+function FilterButton({
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="openpress-workspace-gallery__filter-btn"
+      aria-pressed={active}
+      data-active={active ? "true" : "false"}
+      onClick={onClick}
+    >
+      <span className="openpress-workspace-gallery__filter-label">{label}</span>
+      <span className="openpress-workspace-gallery__filter-count">{String(count).padStart(2, "0")}</span>
+    </button>
+  );
+}
+
 function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelect: () => void }) {
   const handleKey = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter" || event.key === " ") {
@@ -62,7 +103,7 @@ function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelec
       aria-label={`Open ${press.title}`}
     >
       <PressThumbnail press={press} />
-      <div className="openpress-workspace-gallery__body">
+      <div className="openpress-workspace-gallery__card-body">
         <div className="openpress-workspace-gallery__title">{press.title}</div>
         <div className="openpress-workspace-gallery__meta">
           {press.slug ? <span className="openpress-workspace-gallery__slug">{press.slug}</span> : null}
@@ -78,9 +119,6 @@ function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelec
 function PressThumbnail({ press }: { press: WorkspaceManifestPress }) {
   const [state, setState] = useState<ThumbnailState>({ status: "loading" });
 
-  // Lazy-load each Press's document.json so the gallery doesn't block
-  // on a network waterfall when there are many Press. Errors degrade
-  // to the geometry-only placeholder used by the loading state.
   useEffect(() => {
     let cancelled = false;
     fetchFirstPage(press.documentUrl).then((page) => {
@@ -92,9 +130,6 @@ function PressThumbnail({ press }: { press: WorkspaceManifestPress }) {
     return () => { cancelled = true; };
   }, [press.documentUrl]);
 
-  // Outer card is uniform 4:3 (set in CSS). The page itself letterboxes
-  // inside via centered scale, so A4 portrait renders tall-and-narrow,
-  // social square renders centered, 16:9 slide stretches edge-to-edge.
   return (
     <div className="openpress-workspace-gallery__thumb" aria-hidden="true">
       {state.status === "ready" ? (
@@ -147,10 +182,6 @@ function PageMiniature({ page, press }: { page: HtmlPageBlock; press: WorkspaceM
     visibility: scale ? "visible" : "hidden",
   };
 
-  // Match the wrapping used by PublicReaderPage so scoped CSS targeting
-  // `.openpress-html-page__html` selectors lights up identically. The
-  // outer frame owns centering; the page only scales from its top-left
-  // origin, which avoids mixed translate/scale centering drift.
   const pageStyle: CSSProperties = {
     "--openpress-page-width": `${pageWidthPx}px`,
     "--openpress-page-height": `${pageHeightPx}px`,
@@ -172,7 +203,6 @@ function PageMiniature({ page, press }: { page: HtmlPageBlock; press: WorkspaceM
         <div className={pageClass} style={pageStyle} data-openpress-thumb-page="true">
           <div
             className="openpress-html-page__html"
-            // Trusted HTML — same source as the reader's main render path.
             dangerouslySetInnerHTML={{ __html: page.html }}
           />
         </div>
@@ -198,10 +228,6 @@ async function fetchFirstPage(url: string): Promise<HtmlPageBlock | null> {
   }
 }
 
-// Convert a CSS length string (px / mm / cm / in) into device pixels
-// at 96 dpi. A4 pages are stored as "210mm" / "297mm" so the gallery
-// and thumbnail scalers need this to compute their fit ratio — using
-// the bare string would otherwise resolve to the default asset path.
 function parsePxLength(value: string | undefined): number | null {
   if (!value) return null;
   const match = value.trim().match(/^([\d.]+)\s*(px|mm|cm|in)$/i);

package/src/openpress/reader/SlidePresentationPage.tsx

@@ -29,9 +29,13 @@ export function SlidePresentationPage({
     if (typeof window === "undefined") return 0;
     return pageIndexFromHash(window.location.hash, normalizedPageCount) ?? 0;
   });
-  const [uiMode, setUiMode] = useState<PresentationUiMode>(() => (
-    shouldStartImmersive() ? "immersive" : "chrome"
-  ));
+  const [uiMode, setUiMode] = useState<PresentationUiMode>(() => {
+    if (shouldStartImmersive()) return "immersive";
+    // Fullscreen may already be active if requestFullscreen() was called
+    // synchronously in the workbench click handler before in-place navigation.
+    if (typeof globalThis.document !== "undefined" && globalThis.document.fullscreenElement) return "immersive";
+    return "chrome";
+  });
   const pageViewport = usePageViewportScale({
     stageRef,
     pageContainerRef: sourceContainerRef,

package/src/openpress/workbench/shell/WorkbenchToolbarActions.tsx

@@ -98,36 +98,9 @@ export function WorkbenchToolbarActions({
           </button>
         </div>
       ) : null}
-      <div className="openpress-workbench-toolbar__group" aria-label="匯出">
-        <ExportControl
-          pages={pages}
-          currentPageIndex={currentPageIndex}
-          pressTitle={pressTitle}
-          theme={theme}
-          onExportPdf={onExportPdf}
-          pdfDisabled={pdfDisabled}
-          pdfLabel={pdfLabel}
-          pdfStatusMessage={pdfStatusMessage}
-          pdfActionStatus={pdfActionStatus}
-        />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格">
-        {isSlidePress && onOpenPresentation ? (
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action"
-            data-openpress-slide-present
-            data-openpress-toolbar-expanded="false"
-            data-openpress-toolbar-active="false"
-            aria-pressed="false"
-            title="進入放映模式"
-            aria-label="進入放映模式"
-            onClick={() => onOpenPresentation(currentPageIndex)}
-          >
-            <Play aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">放映</span>
-          </button>
-        ) : null}
+
+      {/* Center group: page geometry / zoom + workspace tools */}
+      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格與工具">
         <button
           type="button"
           className="openpress-workbench-page-geometry"
@@ -146,25 +119,15 @@ export function WorkbenchToolbarActions({
           onScaleModeChange={onScaleModeChange}
           onPageLayoutModeChange={onPageLayoutModeChange}
         />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--right" aria-label="工作台狀態與發布">
+        {workspaceMode ? (
+          <span className="openpress-workbench-toolbar__sep" aria-hidden="true" />
+        ) : null}
         {workspaceMode ? (
           <SearchControl
             sourceBlocksByPath={sourceBlocksByPath}
             onSelectPage={onSelectPage}
           />
         ) : null}
-        {workspaceMode && editStatusMessage ? (
-          <span
-            className="openpress-dev-edit-status openpress-dev-edit-status--toolbar"
-            data-openpress-edit-status={inlineEditStatus.state}
-            role="status"
-            aria-live="polite"
-          >
-            {inlineEditStatus.state === "saving" ? <span className="openpress-dev-edit-status__spinner" aria-hidden="true" /> : null}
-            <span>{editStatusMessage}</span>
-          </span>
-        ) : null}
         {workspaceMode ? (
           <button
             type="button"
@@ -183,6 +146,17 @@ export function WorkbenchToolbarActions({
             <span className="openpress-dev-inspector-status">{inspectorSelectionLabel}</span>
           </button>
         ) : null}
+        {workspaceMode && editStatusMessage ? (
+          <span
+            className="openpress-dev-edit-status openpress-dev-edit-status--toolbar"
+            data-openpress-edit-status={inlineEditStatus.state}
+            role="status"
+            aria-live="polite"
+          >
+            {inlineEditStatus.state === "saving" ? <span className="openpress-dev-edit-status__spinner" aria-hidden="true" /> : null}
+            <span>{editStatusMessage}</span>
+          </span>
+        ) : null}
         {workspaceMode && inspectorMode ? (
           <span
             className="openpress-dev-inspector-status"
@@ -193,6 +167,21 @@ export function WorkbenchToolbarActions({
             {inspectorCommentStatusMessage}
           </span>
         ) : null}
+      </div>
+
+      {/* Right group: export + deploy + present */}
+      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--right" aria-label="匯出與發布">
+        <ExportControl
+          pages={pages}
+          currentPageIndex={currentPageIndex}
+          pressTitle={pressTitle}
+          theme={theme}
+          onExportPdf={onExportPdf}
+          pdfDisabled={pdfDisabled}
+          pdfLabel={pdfLabel}
+          pdfStatusMessage={pdfStatusMessage}
+          pdfActionStatus={pdfActionStatus}
+        />
         {localDeployEnabled ? (
           <DeploymentControl
             info={deploymentInfo}
@@ -200,6 +189,20 @@ export function WorkbenchToolbarActions({
             onDeploy={onDeploy}
           />
         ) : null}
+        {isSlidePress && onOpenPresentation ? (
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action openpress-workbench-toolbar-action--primary"
+            data-openpress-slide-present
+            aria-pressed="false"
+            title="進入放映模式"
+            aria-label="進入放映模式"
+            onClick={() => onOpenPresentation(currentPageIndex)}
+          >
+            <Play aria-hidden="true" />
+            <span className="openpress-workbench-toolbar-action__label">放映</span>
+          </button>
+        ) : null}
       </div>
     </>
   );

package/src/styles/openpress/workbench-toolbar.css

@@ -235,6 +235,15 @@
   height: 1px;
 }
 
+.openpress-workbench-toolbar__sep {
+  display: block;
+  width: 1px;
+  height: 16px;
+  flex: 0 0 auto;
+  background: rgb(255 255 255 / 10%);
+  border-radius: 1px;
+}
+
 .openpress-workbench-toolbar-action {
   position: relative;
   display: inline-flex;
@@ -279,6 +288,30 @@
   opacity: 0.62;
 }
 
+.openpress-workbench-toolbar-action--primary {
+  width: auto;
+  min-width: 30px;
+  max-width: min(34vw, 300px);
+  gap: 7px;
+  padding: 0 12px;
+  background: var(--openpress-accent, #df4b21);
+  border-color: transparent;
+  color: #fff;
+}
+
+.openpress-workbench-toolbar-action--primary .openpress-workbench-toolbar-action__label {
+  display: inline-flex;
+}
+
+.openpress-workbench-toolbar-action--primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 82%, #fff);
+  color: #fff;
+}
+
+.openpress-workbench-toolbar-action--primary:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
 .openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] {
   width: auto;
   min-width: 30px;

package/src/styles/openpress/workspace-gallery.css

@@ -4,10 +4,8 @@
    load the document directly, so this CSS is dormant until users
    add a second <Press> to their <Workspace>.
 
-   Layout intent: Figma-style file grid — uniform card width, fixed
-   thumbnail aspect ratio (4:3), filename + meta below. Each card
-   loads its first page asynchronously and renders it scaled-down
-   inside the thumbnail slot. */
+   Layout: full-height dark page, header + two-column body
+   (narrow left sidebar for type filter, fluid right grid). */
 
 .openpress-workspace-gallery {
   --workspace-bg: #10110f;
@@ -20,10 +18,10 @@
   --workspace-card-muted: #65635d;
   --workspace-card-line: rgba(20, 20, 17, 0.1);
   --workspace-card-stage: #e8e5dc;
-  display: grid;
-  gap: 2rem;
+  --workspace-sidebar-w: 180px;
+  display: flex;
+  flex-direction: column;
   min-height: 100vh;
-  max-width: none;
   margin: 0;
   padding: 3.6rem clamp(2rem, 4vw, 4.5rem) 6rem;
   font-family: var(--openpress-font-body, system-ui, sans-serif);
@@ -31,11 +29,13 @@
   background:
     linear-gradient(180deg, var(--workspace-bg-soft), var(--workspace-bg) 42rem),
     var(--workspace-bg);
+  gap: 2.25rem;
 }
 
+/* ── Header ──────────────────────────────────────────────── */
+
 .openpress-workspace-gallery__header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 2.5rem;
@@ -48,50 +48,114 @@
   gap: 0.75rem;
 }
 
-.openpress-workspace-gallery__eyebrow {
+.openpress-workspace-gallery__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   margin: 0;
-  color: var(--workspace-muted);
   font-family: var(--openpress-font-mono, ui-monospace, monospace);
   font-size: 0.68rem;
   font-weight: 600;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
+.openpress-workspace-gallery__brand-mark {
+  color: var(--workspace-ink);
+}
+
+.openpress-workspace-gallery__brand-sep {
+  color: var(--workspace-muted);
+  letter-spacing: 0;
+}
+
+.openpress-workspace-gallery__eyebrow {
+  color: var(--workspace-muted);
+}
+
 .openpress-workspace-gallery__header h1 {
   margin: 0;
   font-family: var(--openpress-font-display, var(--openpress-font-body, system-ui));
-  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
-  font-weight: 720;
-  line-height: 0.94;
-  letter-spacing: -0.035em;
+  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
   color: var(--workspace-ink);
 }
 
-.openpress-workspace-gallery__count {
-  margin: 0;
+/* ── Body: sidebar + grid ────────────────────────────────── */
+
+.openpress-workspace-gallery__body {
   display: grid;
-  justify-items: end;
-  gap: 0.25rem;
-  min-width: 4.5rem;
+  grid-template-columns: var(--workspace-sidebar-w) 1fr;
+  align-items: start;
+  gap: 2.5rem;
+}
+
+/* ── Left sidebar ────────────────────────────────────────── */
+
+.openpress-workspace-gallery__sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  position: sticky;
+  top: 1.5rem;
+}
+
+.openpress-workspace-gallery__filter-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.52rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--workspace-muted);
+  font-family: var(--openpress-font-body, system-ui, sans-serif);
+  font-size: 0.82rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease,
+    border-color 140ms ease;
+}
+
+.openpress-workspace-gallery__filter-btn:hover {
+  background: rgba(244, 241, 232, 0.06);
   color: var(--workspace-ink);
-  font-family: var(--openpress-font-mono, ui-monospace, monospace);
-  line-height: 1;
 }
 
-.openpress-workspace-gallery__count span {
+.openpress-workspace-gallery__filter-btn[data-active="true"] {
+  background: rgba(244, 241, 232, 0.1);
+  border-color: rgba(244, 241, 232, 0.14);
   color: var(--workspace-ink);
-  font-size: 2rem;
-  font-weight: 500;
-  letter-spacing: -0.04em;
 }
 
-.openpress-workspace-gallery__count small {
+.openpress-workspace-gallery__filter-label {
+  flex: 1 1 auto;
+}
+
+.openpress-workspace-gallery__filter-count {
+  flex: 0 0 auto;
+  font-family: var(--openpress-font-mono, ui-monospace, monospace);
+  font-size: 0.72rem;
+  font-weight: 500;
   color: var(--workspace-muted);
-  font-size: 0.62rem;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.openpress-workspace-gallery__filter-btn[data-active="true"] .openpress-workspace-gallery__filter-count {
+  color: var(--workspace-ink);
+}
+
+/* ── Main grid ───────────────────────────────────────────── */
+
+.openpress-workspace-gallery__main {
+  min-width: 0;
 }
 
 .openpress-workspace-gallery__grid {
@@ -100,8 +164,6 @@
   padding: 0;
   display: grid;
   align-items: start;
-  /* Uniform card size — Figma-style. Outer thumb is fixed 4:3, the
-     inner page letterboxes to its own geometry. */
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 1.5rem;
 }
@@ -110,6 +172,15 @@
   display: flex;
 }
 
+.openpress-workspace-gallery__empty {
+  margin: 0;
+  padding: 3rem 0;
+  color: var(--workspace-muted);
+  font-size: 0.88rem;
+}
+
+/* ── Card ────────────────────────────────────────────────── */
+
 .openpress-workspace-gallery__card {
   appearance: none;
   display: grid;
@@ -138,13 +209,12 @@
   outline: none;
 }
 
+/* ── Thumbnail ───────────────────────────────────────────── */
+
 .openpress-workspace-gallery__thumb {
   position: relative;
   display: block;
   width: 100%;
-  /* Uniform 4:3 outer slot across every card. The page itself
-     letterboxes inside via centered scale, so each Press shows at its
-     own true aspect against the gradient background. */
   aspect-ratio: 4 / 3;
   background:
     linear-gradient(
@@ -220,7 +290,9 @@
   50%      { opacity: 0.55; }
 }
 
-.openpress-workspace-gallery__body {
+/* ── Card body ───────────────────────────────────────────── */
+
+.openpress-workspace-gallery__card-body {
   display: grid;
   align-content: space-between;
   gap: 1.2rem;
@@ -262,10 +334,6 @@
   white-space: nowrap;
 }
 
-.openpress-workspace-gallery__geom {
-  color: var(--workspace-card-muted);
-}
-
 .openpress-workspace-gallery__geom {
   display: inline-flex;
   align-items: center;
@@ -279,16 +347,31 @@
   white-space: nowrap;
 }
 
+/* ── Responsive ──────────────────────────────────────────── */
+
+@media (max-width: 860px) {
+  .openpress-workspace-gallery__body {
+    grid-template-columns: 1fr;
+  }
+
+  .openpress-workspace-gallery__sidebar {
+    position: static;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .openpress-workspace-gallery__filter-btn {
+    width: auto;
+    flex: 0 0 auto;
+  }
+}
+
 @media (max-width: 720px) {
   .openpress-workspace-gallery {
     padding: 2.25rem 1rem 4rem;
   }
 
-  .openpress-workspace-gallery__header {
-    display: grid;
-    align-items: start;
-  }
-
   .openpress-workspace-gallery__grid {
     grid-template-columns: 1fr;
   }