Improve the layout of the "Word wrapping" checkbox

TriliumNext · Oct 29, 2024 · 2459bbf · 2459bbf
1 parent 60426ea
commit 2459bbf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/public/app/widgets/type_widgets/options/appearance/code_block.js b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
@@ -27,11 +27,11 @@ const TPL = `
             <select class="theme-select form-select"></select>
         </div>
 
-        <div class="col-6">
-            <label>${t("code_block.word_wrapping")}</label>
-            <div class="form-check">
+        <div class="col-6 side-checkbox">
+            <label class="form-check">
                 <input type="checkbox" class="word-wrap form-check-input" />
-            </div>
+                ${t("code_block.word_wrapping")}
+            </label>
         </div>
     </div>
 

diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
@@ -854,6 +854,14 @@ html .note-detail-editable-text :not(figure, .include-note):first-child {
     margin-right: 1em;
 }
 
+.side-checkbox {
+    display: flex;
+    align-items: end;
+    padding-top: .375rem;
+    padding-bottom: .375rem;
+    line-height: 1.5;
+}
+
 .ck-content .todo-list .todo-list__label > input:before {
     border: 1px solid var(--muted-text-color) !important;
 }
@@ -1220,4 +1228,4 @@ textarea {
 
 .jump-to-note-results .aa-suggestions {
     padding: 1rem;
-}
+}