From 35da7908f81952b2fcf697fb1eddfa67d150c304 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 20 Oct 2024 00:25:11 +0300
Subject: [PATCH 1/9] client: Move promoted attributes to scrolling container

---
 src/public/app/layouts/desktop_layout.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index fd4aff19f..1fc15fb69 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -140,7 +140,6 @@ export default class DesktopLayout {
                                             // the order of the widgets matter. Some of these want to "activate" themselves
                                             // when visible. When this happens to multiple of them, the first one "wins".
                                             // promoted attributes should always win.
-                                            .ribbon(new PromotedAttributesWidget())
                                             .ribbon(new ScriptExecutorWidget())
                                             .ribbon(new SearchDefinitionWidget())
                                             .ribbon(new EditedNotesWidget())
@@ -157,7 +156,7 @@ export default class DesktopLayout {
                                             .ribbon(new NoteInfoWidget())
                                             .button(new RevisionsButton())
                                             .button(new NoteActionsWidget())
-                                    )
+                                        )                                    
                                     .child(new SharedInfoWidget())
                                     .child(new WatchedFileUpdateStatusWidget())
                                     .child(new FloatingButtons()
@@ -175,6 +174,7 @@ export default class DesktopLayout {
                                     .child(
                                         new ScrollingContainer()
                                             .filling()
+                                            .child(new PromotedAttributesWidget())
                                             .child(new SqlTableSchemasWidget())
                                             .child(new NoteDetailWidget())
                                             .child(new NoteListWidget())

From 18b0907841c92c2271e6f9681fec6acb73191c9f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 20 Oct 2024 00:26:55 +0300
Subject: [PATCH 2/9] client: Move note title to scrolling container

---
 src/public/app/layouts/desktop_layout.js | 30 ++++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 1fc15fb69..2ba26c307 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -121,20 +121,7 @@ export default class DesktopLayout {
                         .collapsible()
                         .id('center-pane')
                         .child(new SplitNoteContainer(() =>
-                                new NoteWrapperWidget()
-                                    .child(new FlexContainer('row').class('title-row')
-                                        .css("height", "50px")
-                                        .css("min-height", "50px")
-                                        .css('align-items', "center")
-                                        .cssBlock('.title-row > * { margin: 5px; }')
-                                        .child(new NoteIconWidget())
-                                        .child(new NoteTitleWidget())
-                                        .child(new SpacerWidget(0, 1))
-                                        .child(new MovePaneButton(true))
-                                        .child(new MovePaneButton(false))
-                                        .child(new ClosePaneButton())
-                                        .child(new CreatePaneButton())
-                                    )
+                                new NoteWrapperWidget()                                    
                                     .child(
                                         new RibbonContainer()
                                             // the order of the widgets matter. Some of these want to "activate" themselves
@@ -171,9 +158,22 @@ export default class DesktopLayout {
                                         .child(new HideFloatingButtonsButton())
                                     )
                                     .child(new MermaidWidget())
-                                    .child(
+                                    .child(                                        
                                         new ScrollingContainer()
                                             .filling()
+                                            .child(new FlexContainer('row').class('title-row')
+                                                .css("height", "50px")
+                                                .css("min-height", "50px")
+                                                .css('align-items', "center")
+                                                .cssBlock('.title-row > * { margin: 5px; }')
+                                                .child(new NoteIconWidget())
+                                                .child(new NoteTitleWidget())
+                                                .child(new SpacerWidget(0, 1))
+                                                .child(new MovePaneButton(true))
+                                                .child(new MovePaneButton(false))
+                                                .child(new ClosePaneButton())
+                                                .child(new CreatePaneButton())
+                                            )
                                             .child(new PromotedAttributesWidget())
                                             .child(new SqlTableSchemasWidget())
                                             .child(new NoteDetailWidget())

From fcebb43410bdb0c3fa9d843349b17a68c9043bc8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 20 Oct 2024 00:38:17 +0300
Subject: [PATCH 3/9] client: Use single column layout for promoted attributes

---
 .../ribbon_widgets/promoted_attributes.js     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index 5c91b4223..6811ea1c6 100644
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -18,32 +18,35 @@ const TPL = `
     }
     
     .promoted-attributes-container {
-        margin: auto;
-        display: flex;
-        flex-direction: row;
-        flex-shrink: 0;
-        flex-grow: 0;
-        justify-content: space-evenly;
+        margin: 0 1.5em;
         overflow: auto;
         max-height: 400px;
         flex-wrap: wrap;
+        display: table;
     }
-    
     .promoted-attribute-cell {
         display: flex;
         align-items: center;
         margin: 10px;
+        display: table-row;
+    }
+    .promoted-attribute-cell > * {
+        display: table-cell;
+        padding: 1px 0;
     }
     
     .promoted-attribute-cell div.input-group {
         margin-left: 10px;
+        display: flex;
     }
     .promoted-attribute-cell strong {
         word-break:keep-all;
         white-space: nowrap;
     }
     .promoted-attribute-cell input[type="checkbox"] {
-        height: 1.5em;
+        height: 1.5em;        
+        flex-grow: 0;
+        width: unset;
     }
     
     </style>
@@ -211,9 +214,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
             }
             else if (definition.labelType === 'boolean') {
                 $input.prop("type", "checkbox");
-                // hack, without this the checkbox is invisible
-                // we should be using a different bootstrap structure for checkboxes
-                $input.css('width', '80px');
 
                 if (valueAttr.value === "true") {
                     $input.prop("checked", "checked");

From ac61d0f3ea41693af79b835859dd1d96fe89654e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 20 Oct 2024 00:56:05 +0300
Subject: [PATCH 4/9] client: Move ribbon at the bottom

---
 src/public/app/layouts/desktop_layout.js      | 46 +++++++++----------
 .../widgets/containers/ribbon_container.js    | 14 +++---
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 2ba26c307..b6a0583d9 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -121,29 +121,7 @@ export default class DesktopLayout {
                         .collapsible()
                         .id('center-pane')
                         .child(new SplitNoteContainer(() =>
-                                new NoteWrapperWidget()                                    
-                                    .child(
-                                        new RibbonContainer()
-                                            // the order of the widgets matter. Some of these want to "activate" themselves
-                                            // when visible. When this happens to multiple of them, the first one "wins".
-                                            // promoted attributes should always win.
-                                            .ribbon(new ScriptExecutorWidget())
-                                            .ribbon(new SearchDefinitionWidget())
-                                            .ribbon(new EditedNotesWidget())
-                                            .ribbon(new BookPropertiesWidget())
-                                            .ribbon(new NotePropertiesWidget())
-                                            .ribbon(new FilePropertiesWidget())
-                                            .ribbon(new ImagePropertiesWidget())
-                                            .ribbon(new BasicPropertiesWidget())
-                                            .ribbon(new OwnedAttributeListWidget())
-                                            .ribbon(new InheritedAttributesWidget())
-                                            .ribbon(new NotePathsWidget())
-                                            .ribbon(new NoteMapRibbonWidget())
-                                            .ribbon(new SimilarNotesWidget())
-                                            .ribbon(new NoteInfoWidget())
-                                            .button(new RevisionsButton())
-                                            .button(new NoteActionsWidget())
-                                        )                                    
+                                new NoteWrapperWidget()                                                                                                        
                                     .child(new SharedInfoWidget())
                                     .child(new WatchedFileUpdateStatusWidget())
                                     .child(new FloatingButtons()
@@ -188,6 +166,28 @@ export default class DesktopLayout {
                                         ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC
                                         ...this.customWidgets.get('note-detail-pane')
                                     )
+                                    .child(
+                                        new RibbonContainer()
+                                            // the order of the widgets matter. Some of these want to "activate" themselves
+                                            // when visible. When this happens to multiple of them, the first one "wins".
+                                            // promoted attributes should always win.
+                                            .ribbon(new ScriptExecutorWidget())
+                                            .ribbon(new SearchDefinitionWidget())
+                                            .ribbon(new EditedNotesWidget())
+                                            .ribbon(new BookPropertiesWidget())
+                                            .ribbon(new NotePropertiesWidget())
+                                            .ribbon(new FilePropertiesWidget())
+                                            .ribbon(new ImagePropertiesWidget())
+                                            .ribbon(new BasicPropertiesWidget())
+                                            .ribbon(new OwnedAttributeListWidget())
+                                            .ribbon(new InheritedAttributesWidget())
+                                            .ribbon(new NotePathsWidget())
+                                            .ribbon(new NoteMapRibbonWidget())
+                                            .ribbon(new SimilarNotesWidget())
+                                            .ribbon(new NoteInfoWidget())
+                                            .button(new RevisionsButton())
+                                            .button(new NoteActionsWidget())
+                                        )    
                             )
                         )
                         .child(...this.customWidgets.get('center-pane'))
diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js
index c75776a99..604d2c28e 100644
--- a/src/public/app/widgets/containers/ribbon_container.js
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -6,7 +6,7 @@ const TPL = `
 <div class="ribbon-container">
     <style>
     .ribbon-container {
-        margin-bottom: 5px;
+        margin-top: 5px;
     }
     
     .ribbon-top-row {
@@ -24,7 +24,7 @@ const TPL = `
     
     .ribbon-tab-title {
         color: var(--muted-text-color);
-        border-bottom: 1px solid var(--main-border-color); 
+        border-top: 1px solid var(--main-border-color); 
         min-width: 24px;
         flex-basis: 24px;
         max-width: max-content;
@@ -39,7 +39,7 @@ const TPL = `
     
     .ribbon-tab-title.active {
         color: var(--main-text-color);
-        border-bottom: 3px solid var(--main-text-color);
+        border-top: 3px solid var(--main-text-color);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -62,7 +62,7 @@ const TPL = `
         min-width: 0;
         max-width: 35px;
         flex-grow: 1;
-        border-bottom: 1px solid var(--main-border-color);
+        border-top: 1px solid var(--main-border-color);
     }
         
     .ribbon-tab-spacer:last-of-type {
@@ -74,7 +74,7 @@ const TPL = `
     
     .ribbon-button-container {
         display: flex;
-        border-bottom: 1px solid var(--main-border-color); 
+        border-top: 1px solid var(--main-border-color); 
         margin-right: 5px;
     }
     
@@ -86,9 +86,9 @@ const TPL = `
     
     .ribbon-body {
         display: none;
-        border-bottom: 1px solid var(--main-border-color);
+        border-top: 1px solid var(--main-border-color);
         margin-left: 10px;
-        margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
+        margin-right: 5px; /* needs to have this value so that the top border is the same width as the top one */
     }
     
     .ribbon-body.active {

From db0911cc28d6b71136eec014b77a014760c81c1f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 20 Oct 2024 01:11:29 +0300
Subject: [PATCH 5/9] client: Focus promoted cell when clicking label

---
 .../app/widgets/ribbon_widgets/promoted_attributes.js     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index 6811ea1c6..15326e734 100644
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -30,6 +30,10 @@ const TPL = `
         margin: 10px;
         display: table-row;
     }
+    .promoted-attribute-cell > label {
+        user-select: none;
+        font-weight: bold;
+    }
     .promoted-attribute-cell > * {
         display: table-cell;
         padding: 1px 0;
@@ -140,9 +144,11 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
     async createPromotedAttributeCell(definitionAttr, valueAttr, valueName) {
         const definition = definitionAttr.getDefinition();
+        const id = `value-${this.noteId}-${definitionAttr.position}`;
 
         const $input = $("<input>")
             .prop("tabindex", 200 + definitionAttr.position)
+            .prop("id", id)
             .attr("data-attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId : '') // if not owned, we'll force creation of a new attribute instead of updating the inherited one
             .attr("data-attribute-type", valueAttr.type)
             .attr("data-attribute-name", valueAttr.name)
@@ -157,7 +163,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
             .attr("nowrap", true);
 
         const $wrapper = $('<div class="promoted-attribute-cell">')
-            .append($("<strong>").text(definition.promotedAlias ?? valueName))
+            .append($("<label>").prop("for", id).text(definition.promotedAlias ?? valueName))
             .append($("<div>").addClass("input-group").append($input))
             .append($actionCell)
             .append($multiplicityCell);

From 40321355058f1cac52b0fd954287188c18c21862 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 31 Oct 2024 23:44:32 +0200
Subject: [PATCH 6/9] Revert "client: Move ribbon at the bottom"

This reverts commit 9b4ae87ef875d83c8735743972663f82913c9ff3.
---
 src/public/app/layouts/desktop_layout.js      | 46 +++++++++----------
 .../widgets/containers/ribbon_container.js    | 14 +++---
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index b6a0583d9..2ba26c307 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -121,7 +121,29 @@ export default class DesktopLayout {
                         .collapsible()
                         .id('center-pane')
                         .child(new SplitNoteContainer(() =>
-                                new NoteWrapperWidget()                                                                                                        
+                                new NoteWrapperWidget()                                    
+                                    .child(
+                                        new RibbonContainer()
+                                            // the order of the widgets matter. Some of these want to "activate" themselves
+                                            // when visible. When this happens to multiple of them, the first one "wins".
+                                            // promoted attributes should always win.
+                                            .ribbon(new ScriptExecutorWidget())
+                                            .ribbon(new SearchDefinitionWidget())
+                                            .ribbon(new EditedNotesWidget())
+                                            .ribbon(new BookPropertiesWidget())
+                                            .ribbon(new NotePropertiesWidget())
+                                            .ribbon(new FilePropertiesWidget())
+                                            .ribbon(new ImagePropertiesWidget())
+                                            .ribbon(new BasicPropertiesWidget())
+                                            .ribbon(new OwnedAttributeListWidget())
+                                            .ribbon(new InheritedAttributesWidget())
+                                            .ribbon(new NotePathsWidget())
+                                            .ribbon(new NoteMapRibbonWidget())
+                                            .ribbon(new SimilarNotesWidget())
+                                            .ribbon(new NoteInfoWidget())
+                                            .button(new RevisionsButton())
+                                            .button(new NoteActionsWidget())
+                                        )                                    
                                     .child(new SharedInfoWidget())
                                     .child(new WatchedFileUpdateStatusWidget())
                                     .child(new FloatingButtons()
@@ -166,28 +188,6 @@ export default class DesktopLayout {
                                         ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC
                                         ...this.customWidgets.get('note-detail-pane')
                                     )
-                                    .child(
-                                        new RibbonContainer()
-                                            // the order of the widgets matter. Some of these want to "activate" themselves
-                                            // when visible. When this happens to multiple of them, the first one "wins".
-                                            // promoted attributes should always win.
-                                            .ribbon(new ScriptExecutorWidget())
-                                            .ribbon(new SearchDefinitionWidget())
-                                            .ribbon(new EditedNotesWidget())
-                                            .ribbon(new BookPropertiesWidget())
-                                            .ribbon(new NotePropertiesWidget())
-                                            .ribbon(new FilePropertiesWidget())
-                                            .ribbon(new ImagePropertiesWidget())
-                                            .ribbon(new BasicPropertiesWidget())
-                                            .ribbon(new OwnedAttributeListWidget())
-                                            .ribbon(new InheritedAttributesWidget())
-                                            .ribbon(new NotePathsWidget())
-                                            .ribbon(new NoteMapRibbonWidget())
-                                            .ribbon(new SimilarNotesWidget())
-                                            .ribbon(new NoteInfoWidget())
-                                            .button(new RevisionsButton())
-                                            .button(new NoteActionsWidget())
-                                        )    
                             )
                         )
                         .child(...this.customWidgets.get('center-pane'))
diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js
index 604d2c28e..c75776a99 100644
--- a/src/public/app/widgets/containers/ribbon_container.js
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -6,7 +6,7 @@ const TPL = `
 <div class="ribbon-container">
     <style>
     .ribbon-container {
-        margin-top: 5px;
+        margin-bottom: 5px;
     }
     
     .ribbon-top-row {
@@ -24,7 +24,7 @@ const TPL = `
     
     .ribbon-tab-title {
         color: var(--muted-text-color);
-        border-top: 1px solid var(--main-border-color); 
+        border-bottom: 1px solid var(--main-border-color); 
         min-width: 24px;
         flex-basis: 24px;
         max-width: max-content;
@@ -39,7 +39,7 @@ const TPL = `
     
     .ribbon-tab-title.active {
         color: var(--main-text-color);
-        border-top: 3px solid var(--main-text-color);
+        border-bottom: 3px solid var(--main-text-color);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -62,7 +62,7 @@ const TPL = `
         min-width: 0;
         max-width: 35px;
         flex-grow: 1;
-        border-top: 1px solid var(--main-border-color);
+        border-bottom: 1px solid var(--main-border-color);
     }
         
     .ribbon-tab-spacer:last-of-type {
@@ -74,7 +74,7 @@ const TPL = `
     
     .ribbon-button-container {
         display: flex;
-        border-top: 1px solid var(--main-border-color); 
+        border-bottom: 1px solid var(--main-border-color); 
         margin-right: 5px;
     }
     
@@ -86,9 +86,9 @@ const TPL = `
     
     .ribbon-body {
         display: none;
-        border-top: 1px solid var(--main-border-color);
+        border-bottom: 1px solid var(--main-border-color);
         margin-left: 10px;
-        margin-right: 5px; /* needs to have this value so that the top border is the same width as the top one */
+        margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
     }
     
     .ribbon-body.active {

From ceae1d5aa3229ec03914d00b9344fee6e4fc59d9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Nov 2024 21:12:44 +0200
Subject: [PATCH 7/9] revert(client): add back fixed title bar

---
 src/public/app/layouts/desktop_layout.js | 30 ++++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 907a1707c..35087fb31 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -122,7 +122,20 @@ export default class DesktopLayout {
                         .collapsible()
                         .id('center-pane')
                         .child(new SplitNoteContainer(() =>
-                                new NoteWrapperWidget()                                    
+                                new NoteWrapperWidget()
+                                    .child(new FlexContainer('row').class('title-row')
+                                        .css("height", "50px")
+                                        .css("min-height", "50px")
+                                        .css('align-items', "center")
+                                        .cssBlock('.title-row > * { margin: 5px; }')
+                                        .child(new NoteIconWidget())
+                                        .child(new NoteTitleWidget())
+                                        .child(new SpacerWidget(0, 1))
+                                        .child(new MovePaneButton(true))
+                                        .child(new MovePaneButton(false))
+                                        .child(new ClosePaneButton())
+                                        .child(new CreatePaneButton())
+                                    )
                                     .child(
                                         new RibbonContainer()
                                             // the order of the widgets matter. Some of these want to "activate" themselves
@@ -162,20 +175,7 @@ export default class DesktopLayout {
                                     .child(new MermaidWidget())
                                     .child(                                        
                                         new ScrollingContainer()
-                                            .filling()
-                                            .child(new FlexContainer('row').class('title-row')
-                                                .css("height", "50px")
-                                                .css("min-height", "50px")
-                                                .css('align-items', "center")
-                                                .cssBlock('.title-row > * { margin: 5px; }')
-                                                .child(new NoteIconWidget())
-                                                .child(new NoteTitleWidget())
-                                                .child(new SpacerWidget(0, 1))
-                                                .child(new MovePaneButton(true))
-                                                .child(new MovePaneButton(false))
-                                                .child(new ClosePaneButton())
-                                                .child(new CreatePaneButton())
-                                            )
+                                            .filling()                                            
                                             .child(new PromotedAttributesWidget())
                                             .child(new SqlTableSchemasWidget())
                                             .child(new NoteDetailWidget())

From f125ba55c15fba1abc6eba93819b0e93858c3e5f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Nov 2024 21:22:50 +0200
Subject: [PATCH 8/9] style(promoted): fix heightfor rows

---
 src/public/app/widgets/ribbon_widgets/promoted_attributes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index 15326e734..4cbdfe2a1 100644
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -42,6 +42,7 @@ const TPL = `
     .promoted-attribute-cell div.input-group {
         margin-left: 10px;
         display: flex;
+        min-height: 40px;
     }
     .promoted-attribute-cell strong {
         word-break:keep-all;

From 0b20e8a37d488ef0adf1dd27816d3b4463e326b9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Nov 2024 21:26:07 +0200
Subject: [PATCH 9/9] style(promoted): improve checkbox style

---
 src/public/app/widgets/ribbon_widgets/promoted_attributes.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index 4cbdfe2a1..3be5b2ca3 100644
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -33,6 +33,7 @@ const TPL = `
     .promoted-attribute-cell > label {
         user-select: none;
         font-weight: bold;
+        vertical-align: middle;
     }
     .promoted-attribute-cell > * {
         display: table-cell;
@@ -49,7 +50,7 @@ const TPL = `
         white-space: nowrap;
     }
     .promoted-attribute-cell input[type="checkbox"] {
-        height: 1.5em;        
+        width: 22px !important;
         flex-grow: 0;
         width: unset;
     }