From 29156fcaecd52cf02daaf9a7a52d35c076aefc22 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 15 Oct 2026 17:27:17 +0200
Subject: [PATCH] Vendor stylesheets load in Tailwind's base layer through a
 vendor.css shim, so our overrides win outright; the editor's drag placeholder
 takes the 12% primary

---
 frontend/src/components/Common/UplotChart.tsx     |  7 +++----
 .../src/components/Dashboard/DashboardEditor.tsx  |  1 -
 frontend/src/components/Flow/BrainView.tsx        |  1 -
 frontend/src/components/Flow/FlowEditor.tsx       | 15 +++++++--------
 frontend/src/index.css                            |  1 +
 frontend/src/vendor.css                           | 10 ++++++++++
 6 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/vendor.css

diff --git a/frontend/src/components/Common/UplotChart.tsx b/frontend/src/components/Common/UplotChart.tsx
index d4a9c97..6be1676 100644
--- a/frontend/src/components/Common/UplotChart.tsx
+++ b/frontend/src/components/Common/UplotChart.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react"
 import uPlot from "uplot"
-import "uplot/dist/uPlot.min.css"
 
-// After uPlot's own sheet, and beside this component rather than in the
-// dashboard chunk: a chart on Health or Home is styled without a dashboard
-// having been visited first.
+// Beside this component rather than in the dashboard chunk: a chart on Health
+// or Home is styled without a dashboard having been visited first. uPlot's own
+// sheet comes in through `vendor.css`.
 import "./uplot.css"
 
 import type { HistoryPoint } from "@/client"
diff --git a/frontend/src/components/Dashboard/DashboardEditor.tsx b/frontend/src/components/Dashboard/DashboardEditor.tsx
index 28a3d17..58604eb 100644
--- a/frontend/src/components/Dashboard/DashboardEditor.tsx
+++ b/frontend/src/components/Dashboard/DashboardEditor.tsx
@@ -9,7 +9,6 @@ import {
   type Position,
   setTransform,
 } from "react-grid-layout"
-import "react-grid-layout/css/styles.css"
 
 import {
   type ApiError,
diff --git a/frontend/src/components/Flow/BrainView.tsx b/frontend/src/components/Flow/BrainView.tsx
index 31c61c0..8a7b7db 100644
--- a/frontend/src/components/Flow/BrainView.tsx
+++ b/frontend/src/components/Flow/BrainView.tsx
@@ -9,7 +9,6 @@ import {
   ReactFlowProvider,
   useReactFlow,
 } from "@xyflow/react"
-import "@xyflow/react/dist/style.css"
 import {
   forceCollide,
   forceLink,
diff --git a/frontend/src/components/Flow/FlowEditor.tsx b/frontend/src/components/Flow/FlowEditor.tsx
index 42a4bf6..8ae0f69 100644
--- a/frontend/src/components/Flow/FlowEditor.tsx
+++ b/frontend/src/components/Flow/FlowEditor.tsx
@@ -1,3 +1,10 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
 import {
   Background,
   BackgroundVariant,
@@ -13,14 +20,6 @@ import {
   useStore,
   useUpdateNodeInternals,
 } from "@xyflow/react"
-import "@xyflow/react/dist/style.css"
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-  useSuspenseQuery,
-} from "@tanstack/react-query"
-import { useNavigate } from "@tanstack/react-router"
 import { Workflow } from "lucide-react"
 import { motion } from "motion/react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index be747f8..4d5b59a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./vendor.css";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/frontend/src/vendor.css b/frontend/src/vendor.css
new file mode 100644
index 0000000..ecd6c4d
--- /dev/null
+++ b/frontend/src/vendor.css
@@ -0,0 +1,10 @@
+/*
+ * The libraries' own stylesheets, in Tailwind's `base` layer.
+ *
+ * Imported from TS they were unlayered, so our overrides beat them only by
+ * loading later, and lost wherever a lazy chunk brought the library's sheet in
+ * after ours. In `base` every sheet of ours and every utility wins over them.
+ */
+@import "@xyflow/react/dist/style.css" layer(base);
+@import "uplot/dist/uPlot.min.css" layer(base);
+@import "react-grid-layout/css/styles.css" layer(base);