From a53e7aaee5207ab563b6e0144f3154db917f7da1 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Tue, 11 Mar 2025 22:14:35 +0100
Subject: [PATCH] fix(notebook): css for checkboxes not working (#2570)

---
 packages/widgets/src/notebook/component.tsx |  2 -
 packages/widgets/src/notebook/notebook.css  | 68 +++++++++++++++++++++
 packages/widgets/src/notebook/notebook.tsx  |  2 +
 3 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 packages/widgets/src/notebook/notebook.css

diff --git a/packages/widgets/src/notebook/component.tsx b/packages/widgets/src/notebook/component.tsx
index a9847eceb..84f3b1085 100644
--- a/packages/widgets/src/notebook/component.tsx
+++ b/packages/widgets/src/notebook/component.tsx
@@ -2,8 +2,6 @@
 
 import dynamic from "next/dynamic";
 
-import "@mantine/tiptap/styles.css";
-
 import type { WidgetComponentProps } from "../definition";
 
 const Notebook = dynamic(() => import("./notebook").then((module) => module.Notebook), {
diff --git a/packages/widgets/src/notebook/notebook.css b/packages/widgets/src/notebook/notebook.css
new file mode 100644
index 000000000..83919bf39
--- /dev/null
+++ b/packages/widgets/src/notebook/notebook.css
@@ -0,0 +1,68 @@
+.tiptap hr {
+  border-top-style: double;
+}
+
+.tiptap ul[data-type="taskList"] {
+  padding-left: 17px;
+}
+
+.tiptap ul[data-type="taskList"] li {
+  list-style-type: none;
+  display: flex;
+  gap: 8px;
+}
+
+.tiptap img {
+  max-width: 100%;
+}
+
+.tiptap img.ProseMirror-selectednode {
+  outline: 3px solid rgba(0, 65, 198, 0.8);
+}
+
+.tiptap table {
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.tiptap table td {
+  border-color: var(--mantine-color-gray-5) !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+  box-sizing: border-box;
+  min-width: 1em;
+  padding: 3px 5px;
+  position: relative;
+  vertical-align: top;
+}
+
+.tiptap table td > * {
+  margin-bottom: 0;
+}
+
+.tiptap table .selectedCell:after {
+  background: hsla(0, 0%, 78%, 0.4);
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.tiptap table p {
+  margin: 0;
+}
+
+.tiptap[contenteditable="true"].resize-cursor {
+  cursor: ew-resize;
+}
+
+.tiptap[contenteditable="false"].resize-cursor {
+  pointer-events: none;
+}
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 741e4ac28..257dcfc50 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -65,6 +65,8 @@ import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
 
+import "./notebook.css";
+
 const iconProps = {
   size: 30,
   stroke: 1.5,