fix(tauri): eliminate WebKitGTK scroll and white-flash issues

Two root causes fixed:

1. White flash on startup: add backgroundColor #0a0a0a to tauri.conf.json
   window config so the webview starts dark before Next.js hydrates.

2. Scroll broken on Linux: WebKitGTK enforces min-height:auto on flex
   items, so flex-1 overflow-y-auto containers never scroll — they grow
   to content height instead. Add min-h-0 to every affected scroll
   container and skeleton <main> element across 15 files:
   settings, settings/tokens, my-issues, projects/issues, inbox,
   archived, usage, teams/issues, teams, loading, home skeleton,
   board skeleton, execution-drawer, brainstorm-panel, project-list.

Author: kaizen403

ISSUES.md

@@ -783,6 +783,55 @@ See `.sisyphus/plans/openlinear-issues.md` for full root-cause analysis and file
 
 ---
 
+## [2026-05-26] — Fix all Tauri/WebKitGTK rendering issues
+
+**Status:** Done
+**Agent:** Sisyphus (OpenCode)
+
+### What was done
+
+Searched session history and codebase to identify every Tauri/WebKitGTK problem. Found and fixed two root causes:
+
+**1. White flash on startup (`tauri.conf.json`)**
+- Added `"backgroundColor": "#0a0a0a"` to the window config so the Tauri webview starts dark, eliminating the white flash before Next.js hydrates.
+
+**2. Scroll broken throughout the app (WebKitGTK `min-height: auto` enforcement)**
+- WebKitGTK strictly enforces the CSS spec: a flex item's default `min-height` is `auto`, so `flex-1 overflow-y-auto` alone cannot produce a scrollable area — the item grows to content height instead of scrolling.
+- Added `min-h-0` to every `flex-1 overflow-*` scroll container and every `flex flex-1 flex-col` skeleton `<main>` that was missing it.
+- Affected: settings, settings/tokens, my-issues, projects/issues, inbox, archived, usage, teams/issues, teams, loading skeleton, home page skeleton, board skeleton, execution-drawer, brainstorm-panel, project-list.
+
+**Already in place (no change needed):**
+- `globals.css` fast render profile: strips all `backdrop-filter`, transitions, shadows, and animations on Linux/Tauri to prevent compositor stalls on WebKitGTK.
+- Static font masters (4 woff2 files) instead of variable fonts — eliminates WebKitGTK variable-font rendering bugs.
+- `height: 100%` on `html`/`body` — already present.
+- `overscroll-behavior: none` — already present.
+
+### Files changed
+- `apps/desktop/src-tauri/tauri.conf.json` — added `backgroundColor: "#0a0a0a"`
+- `apps/desktop-ui/app/(app)/settings/page.tsx` — `min-h-0` on main scroll container
+- `apps/desktop-ui/app/(app)/settings/tokens/page.tsx` — `min-h-0` on main
+- `apps/desktop-ui/app/(app)/my-issues/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/projects/issues/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/inbox/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/archived/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/usage/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/teams/issues/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/teams/page.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/app/(app)/loading.tsx` — `min-h-0` on skeleton main
+- `apps/desktop-ui/app/(app)/page.tsx` — `min-h-0` on skeleton main
+- `apps/desktop-ui/app/(app)/projects/board/page.tsx` — `min-h-0` on skeleton main
+- `apps/desktop-ui/components/projects/project-list.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/components/execution-drawer.tsx` — `min-h-0` on scroll div
+- `apps/desktop-ui/components/quick-capture/brainstorm-panel.tsx` — `min-h-0` on scroll div
+
+### Issues encountered
+- None. Typecheck clean after all edits.
+
+### Next steps / blockers
+- Rebuild the Tauri app (`pnpm --filter @openlinear/desktop tauri build` or `pnpm dev-live`) and verify scrolling works on all pages on Linux.
+
+---
+
 <!-- 
 AGENTS: Add new entries above this comment. Format:
 

apps/desktop-ui/app/(app)/archived/page.tsx

@@ -231,7 +231,7 @@ export default function ArchivedPage() {
           </div>
         </div>
 
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 min-h-0 overflow-auto">
           {loading ? (
             <div className="divide-y divide-linear-border/50">
               {Array.from({ length: 6 }).map((_, i) => (

apps/desktop-ui/app/(app)/inbox/page.tsx

@@ -371,7 +371,7 @@ export default function InboxPage() {
         })}
       </div>
 
-      <div className="flex-1 overflow-y-auto bg-linear-bg">
+      <div className="flex-1 min-h-0 overflow-y-auto bg-linear-bg">
         {loading ? (
           <div className="divide-y divide-linear-border">
             {Array.from({ length: 6 }).map((_, i) => (

apps/desktop-ui/app/(app)/loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 export default function Loading() {
   return (
-    <main className="flex flex-1 flex-col">
+    <main className="flex flex-1 flex-col min-h-0">
       <header className="flex h-12 items-center gap-3 border-b border-border/40 px-4">
         <Skeleton className="h-5 w-40" />
         <div className="ml-auto flex gap-2">

apps/desktop-ui/app/(app)/my-issues/page.tsx

@@ -163,7 +163,7 @@ export default function MyIssuesPage() {
         <div className="flex-1 h-full" data-tauri-drag-region />
       </header>
 
-      <div className="flex-1 overflow-y-auto bg-linear-bg">
+      <div className="flex-1 min-h-0 overflow-y-auto bg-linear-bg">
         {loading ? (
           <div>
             {Array.from({ length: 2 }).map((_, gi) => (

apps/desktop-ui/app/(app)/page.tsx

@@ -12,7 +12,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 function HomePageSkeleton() {
   return (
-    <main className="flex flex-1 flex-col bg-linear-bg">
+    <main className="flex flex-1 flex-col min-h-0 bg-linear-bg">
       <div className="flex-1 flex items-center justify-center p-6">
         <Skeleton className="h-12 w-full max-w-3xl rounded-sm" />
       </div>

apps/desktop-ui/app/(app)/projects/board/page.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 function BoardSkeleton() {
   return (
-    <main className="flex flex-1 flex-col bg-linear-bg">
+    <main className="flex flex-1 flex-col min-h-0 bg-linear-bg">
       <header className="min-h-14 border-b border-linear-border flex items-center px-4 sm:px-6 py-2 sm:py-0 bg-linear-bg gap-2 sm:gap-4">
         <Skeleton className="h-5 w-36" />
         <div className="ml-auto flex items-center gap-2">

apps/desktop-ui/app/(app)/projects/issues/page.tsx

@@ -170,7 +170,7 @@ function ProjectIssuesContent() {
         <div className="flex-1 h-full" data-tauri-drag-region />
       </header>
 
-      <div className="flex-1 overflow-y-auto bg-linear-bg">
+      <div className="flex-1 min-h-0 overflow-y-auto bg-linear-bg">
         {loading ? (
           <div>
             {Array.from({ length: 2 }).map((_, gi) => (

apps/desktop-ui/app/(app)/settings/page.tsx

@@ -190,7 +190,7 @@ function SettingsContent() {
           </div>
         </nav>
 
-        <main className="flex-1 overflow-y-auto p-6 sm:p-8">
+        <main className="flex-1 min-h-0 overflow-y-auto p-6 sm:p-8">
           <div className="pb-8">{renderContent()}</div>
         </main>
       </div>

apps/desktop-ui/app/(app)/settings/tokens/page.tsx

@@ -11,7 +11,7 @@ export default function SettingsTokensPage() {
         <h1 className="text-lg font-semibold truncate">Personal Access Tokens</h1>
         <div className="flex-1 h-full" data-tauri-drag-region />
       </header>
-      <main className="flex-1 overflow-y-auto p-6 sm:p-8">
+      <main className="flex-1 min-h-0 overflow-y-auto p-6 sm:p-8">
         <div className="max-w-2xl pb-8">
           <PersonalAccessTokensSection />
         </div>