From 4f0c8b081c8ffb51c6f74038be7cd2c5e85c7932 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 17 Jul 2025 19:54:30 +0300
Subject: [PATCH] feat(views): improve style in collections properties

---
 .../src/widgets/ribbon_widgets/book_properties.ts | 15 +++++++++++++--
 .../ribbon_widgets/book_properties_config.ts      |  7 +++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
index 13df6ce47..144491442 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts
+++ b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
@@ -23,10 +23,15 @@ const TPL = /*html*/`
             align-items: center;
         }
 
-        .book-properties-container > * {
+        .book-properties-container > div {
             margin-right: 15px;
         }
 
+        .book-properties-container > .type-number > label {
+            display: flex;
+            align-items: baseline;
+        }
+
         .book-properties-container input[type="checkbox"] {
             margin-right: 5px;
         }
@@ -127,6 +132,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
     renderBookProperty(property: BookProperty) {
         const $container = $("<div>");
+        $container.addClass(`type-${property.type}`);
         const note = this.note;
         if (!note) {
             return $container;
@@ -173,6 +179,8 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
                     type: "number",
                     class: "form-control form-control-sm",
                     value: note.getLabelValue(property.bindToLabel) || "",
+                    width: property.width ?? 100,
+                    min: property.min ?? 0
                 });
                 $numberInput.on("change", () => {
                     const value = $numberInput.val();
@@ -182,7 +190,10 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
                         attributes.setLabel(note.noteId, property.bindToLabel, String(value));
                     }
                 });
-                $container.append($("<label>").text(property.label).append($numberInput));
+                $container.append($("<label>")
+                    .text(property.label)
+                    .append("&nbsp;".repeat(2))
+                    .append($numberInput));
                 break;
         }
 
diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts b/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
index ffa4303d8..6b8beece9 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
+++ b/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
@@ -26,6 +26,8 @@ interface NumberProperty {
     type: "number",
     label: string;
     bindToLabel: string;
+    width?: number;
+    min?: number;
 }
 
 export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty;
@@ -93,9 +95,10 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
     table: {
         properties: [
             {
-                label: "Max nesting depth",
+                label: "Max nesting depth:",
                 type: "number",
-                bindToLabel: "maxNestingDepth"
+                bindToLabel: "maxNestingDepth",
+                width: 65
             }
         ]
     }