diff --git a/apps/client/src/widgets/PromotedAttributes.css b/apps/client/src/widgets/PromotedAttributes.css
index 45ebad5b2..2e1cab3dd 100644
--- a/apps/client/src/widgets/PromotedAttributes.css
+++ b/apps/client/src/widgets/PromotedAttributes.css
@@ -73,6 +73,11 @@ body.mobile .promoted-attributes-widget {
     border-radius: 25%;
 }
 
+.promoted-attribute-label-number input {
+    text-align: right;
+    width: 120px;
+}
+
 .promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"] {
     position: relative;
     opacity: 0.5;
diff --git a/apps/client/src/widgets/PromotedAttributes.tsx b/apps/client/src/widgets/PromotedAttributes.tsx
index 45258577b..7a98aab44 100644
--- a/apps/client/src/widgets/PromotedAttributes.tsx
+++ b/apps/client/src/widgets/PromotedAttributes.tsx
@@ -8,7 +8,7 @@ import { t } from "../services/i18n";
 import { DefinitionObject, LabelType } from "../services/promoted_attribute_definition_parser";
 import server from "../services/server";
 import FNote from "../entities/fnote";
-import { HTMLInputTypeAttribute, TargetedEvent } from "preact";
+import { HTMLInputTypeAttribute, InputHTMLAttributes, TargetedEvent } from "preact";
 import tree from "../services/tree";
 
 interface Cell {
@@ -113,7 +113,8 @@ function PromotedAttributeCell(props: CellProps) {
     }, [ props.shouldFocus ]);
 
     return (
-        <div className="promoted-attribute-cell">
+        <div className={clsx("promoted-attribute-cell",
+            valueAttr.type === "label" ? `promoted-attribute-label-${definition.labelType}` : "promoted-attribute-relation")}>
             <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
             <div className="input-group">
                 <LabelInput inputId={inputId} {...props} />
@@ -138,6 +139,7 @@ const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
 function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
     const { valueAttr, definition, definitionAttr } = props.cell;
     const onChangeListener = buildPromotedAttributeChangedListener({...props});
+    const extraInputProps: InputHTMLAttributes = {};
 
     useEffect(() => {
         if (definition.labelType === "text") {
@@ -148,6 +150,14 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
         }
     }, []);
 
+    if (definition.labelType === "number") {
+        let step = 1;
+        for (let i = 0; i < (definition.numberPrecision || 0) && i < 10; i++) {
+            step /= 10;
+        }
+        extraInputProps.step = step;
+    }
+
     return (
         <input
             className="form-control promoted-attribute-input"
@@ -160,6 +170,7 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
             data-attribute-type={valueAttr.type}
             data-attribute-name={valueAttr.name}
             onChange={onChangeListener}
+            {...extraInputProps}
         />
     )
 }
diff --git a/apps/client/src/widgets/promoted_attributes.ts b/apps/client/src/widgets/promoted_attributes.ts
index 1a9666e2a..0e8803ddd 100644
--- a/apps/client/src/widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -23,16 +23,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
         if (valueAttr.type === "label") {
             $wrapper.addClass(`promoted-attribute-label-${definition.labelType}`);
-            if (definition.labelType === "text") {
-            } else if (definition.labelType === "number") {
-                let step = 1;
-
-                for (let i = 0; i < (definition.numberPrecision || 0) && i < 10; i++) {
-                    step /= 10;
-                }
-
-                $input.prop("step", step);
-                $input.css("text-align", "right").css("width", "120");
             } else if (definition.labelType === "boolean") {
                 $input.wrap($(`<label class="tn-checkbox"></label>`));
                 $wrapper.find(".input-group").removeClass("input-group");