From 650aa16b89615dd7ea153d639ef277fec7e1b44f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Aug 2025 19:46:26 +0300
Subject: [PATCH] feat(react/ribbon): improve style of note type modal

---
 .../widgets/type_widgets/options/code_notes.css  | 16 ++++++++++++++++
 .../widgets/type_widgets/options/code_notes.tsx  |  6 +++---
 2 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/options/code_notes.css

diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.css b/apps/client/src/widgets/type_widgets/options/code_notes.css
new file mode 100644
index 000000000..7b51f619d
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.css
@@ -0,0 +1,16 @@
+/* #region CodeMimeTypesList */
+.options-mime-types {
+    list-style-type: none;
+    column-width: 250px;
+    padding-left: 0;
+}
+
+.options-mime-types > section {
+    margin-bottom: 1em;
+    break-inside: avoid-column;
+}
+
+.options-mime-types ul {
+    padding-left: 0;
+}
+/* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index 1445671a5..ded1e02d2 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -13,6 +13,7 @@ import { MimeType } from "@triliumnext/commons";
 import mime_types from "../../../services/mime_types";
 import CheckboxList from "./components/CheckboxList";
 import AutoReadOnlySize from "./components/AutoReadOnlySize";
+import "./code_notes.css";
 
 const SAMPLE_MIME = "application/typescript";
 
@@ -132,7 +133,6 @@ function CodeMimeTypes() {
 
 export function CodeMimeTypesList() {
     const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
-    const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []);
     const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
         mime_types.loadMimeTypes();
 
@@ -156,9 +156,9 @@ export function CodeMimeTypesList() {
     }, [ codeNotesMimeTypes ]);  
 
     return (
-        <ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
+        <ul class="options-mime-types">
             {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
-                <section style={sectionStyle}>
+                <section>
                     { initial && <h5>{initial}</h5> }
                     <CheckboxList
                         values={mimeTypes}