diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 612f3bfad..ea6bc3dfc 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -149,8 +149,7 @@ 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 ClassicEditorToolbar())
-                                                .ribbon(new PromotedAttributesWidget())
+                                                .ribbon(new ClassicEditorToolbar())                                                
                                                 .ribbon(new ScriptExecutorWidget())
                                                 .ribbon(new SearchDefinitionWidget())
                                                 .ribbon(new EditedNotesWidget())
@@ -185,6 +184,7 @@ export default class DesktopLayout {
                                         .child(
                                             new ScrollingContainer()
                                                 .filling()
+                                                .child(new PromotedAttributesWidget())
                                                 .child(new SqlTableSchemasWidget())
                                                 .child(new NoteDetailWidget())
                                                 .child(new NoteListWidget())
diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index 4be990067..7a5f68838 100644
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -18,32 +18,41 @@ 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 > label {
+        user-select: none;
+        font-weight: bold;
+        vertical-align: middle;
+    }
+    .promoted-attribute-cell > * {
+        display: table-cell;
+        padding: 1px 0;
     }
     
     .promoted-attribute-cell div.input-group {
         margin-left: 10px;
+        display: flex;
+        min-height: 40px;
     }
     .promoted-attribute-cell strong {
         word-break:keep-all;
         white-space: nowrap;
     }
     .promoted-attribute-cell input[type="checkbox"] {
-        height: 1.5em;
+        width: 22px !important;
+        flex-grow: 0;
+        width: unset;
     }
     
     </style>
@@ -137,9 +146,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)
@@ -154,7 +165,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);
@@ -211,9 +222,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");