From 340a719efcd0b3b7910d1cfe48f596a6fa0be70b Mon Sep 17 00:00:00 2001
From: litruv <litruv@gmail.com>
Date: Wed, 22 Jul 2026 18:37:21 +1000
Subject: [PATCH] Fix Electron production CSS not loading under file://.

Strip crossorigin from the built index so stylesheets apply in the packaged app, and use a relative manifest path for the same reason.
---
 index.html                                |  2 +-
 src/app/components/message/RenderBody.tsx |  2 --
 vite.config.js                            | 16 ++++++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3d1d48b..8af8769 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Space+Grotesk:wght@400;600;700&display=swap"
     />
 
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="./manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="application-name" content="Paarrot" />
     <meta name="apple-mobile-web-app-title" content="Paarrot" />
diff --git a/src/app/components/message/RenderBody.tsx b/src/app/components/message/RenderBody.tsx
index ef57315..8f606f3 100644
--- a/src/app/components/message/RenderBody.tsx
+++ b/src/app/components/message/RenderBody.tsx
@@ -6,8 +6,6 @@ import { MessageEmptyContent } from './content';
 import { sanitizeCustomHtml } from '../../utils/sanitize';
 import { highlightText, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 import { isMxEmoticonOnlyHtml } from '../../utils/regex';
-// Ensure jumbo emoji global styles are always in the bundle.
-import './layout/layout.css';
 
 type RenderBodyProps = {
   body: string;
diff --git a/vite.config.js b/vite.config.js
index 7d3faf7..a7efe65 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -136,6 +136,21 @@ function servePublicAssets() {
 }
 
 // CORS proxy for Matrix homeservers during development
+/**
+ * Vite adds crossorigin to module/CSS tags when base is relative (./).
+ * Electron serves the build via file:// — those assets then fail CORS checks
+ * and the app renders with browser defaults (black text, broken spacing).
+ */
+function stripCrossoriginForFileProtocol() {
+  return {
+    name: 'strip-crossorigin-for-file-protocol',
+    apply: 'build',
+    transformIndexHtml(html) {
+      return html.replace(/\s+crossorigin/g, '');
+    },
+  };
+}
+
 function corsProxyMiddleware() {
   return {
     name: 'vite-plugin-cors-proxy',
@@ -228,6 +243,7 @@ export default defineConfig({
     },
   },
   plugins: [
+    stripCrossoriginForFileProtocol(),
     corsProxyMiddleware(), // Add CORS proxy for development
     serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
     serveGifWorker(),