diff --git a/docs/TODO.md b/docs/TODO.md
index 17f63742..32cf3a2d 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -3,7 +3,6 @@
 - sfx selection
 - custom action
 
-- fix spinbox buttons
 - combo box custom item
 - fix flickable popups can't be flicked by keyboard
 - seen tooltips can't be shown on image hover
diff --git a/src/gui/Base/HSpinBox.qml b/src/gui/Base/HSpinBox.qml
index 1c1e9544..a78ea63f 100644
--- a/src/gui/Base/HSpinBox.qml
+++ b/src/gui/Base/HSpinBox.qml
@@ -2,6 +2,7 @@
 
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
 
 SpinBox {
     id: box
@@ -11,53 +12,63 @@ SpinBox {
 
     function reset() { value = Qt.binding(() => defaultValue || 0) }
 
-
-    // XXX TODO: default binding break
     value: defaultValue || 0
     implicitHeight: theme.baseElementsHeight
     padding: 0
     editable: true
+    to: 2147483647
 
     background: null
 
-    contentItem: HTextField {
-        id: textField
-        height: parent.height
-        implicitWidth: 90 * theme.uiScale
-        radius: 0
-        horizontalAlignment: Qt.AlignHCenter
-        verticalAlignment: Qt.AlignVCenter
-        // FIXME
-        text: box.textFromValue(box.value, box.locale)
+    contentItem: HRowLayout {
+        HButton {
+            text: qsTr("-")
+            font.pixelSize: theme.fontSize.biggest
+            autoRepeat: true
+            autoRepeatInterval: 50
+            // Don't set enabled to false or it glitches, use opacity instead
+            opacity: box.value > box.from ? 1 : theme.disabledElementsOpacity
+            onPressed: if (box.value > box.from) box.decrease()
+            Layout.fillHeight: true
 
-        readOnly: ! box.editable
-        validator: box.validator
-        inputMethodHints: Qt.ImhFormattedNumbersOnly
+            Behavior on opacity { HNumberAnimation {} }
+        }
 
-        onTextChanged: if (text && text !== "-") box.value = text
+        HTextField {
+            id: textField
+            height: parent.height
+            implicitWidth: 90 * theme.uiScale
+            radius: 0
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+            text: box.value
+
+            readOnly: ! box.editable
+            validator: box.validator
+            inputMethodHints: Qt.ImhFormattedNumbersOnly
+
+            onTextEdited: {
+                if (! text || text === "-") return
+                const input = parseInt(text, 10)
+                box.value   = Math.max(box.from, Math.min(box.to, input))
+            }
+        }
+
+        HButton {
+            text: qsTr("+")
+            font.pixelSize: theme.fontSize.biggest
+            autoRepeat: true
+            autoRepeatInterval: 50
+            opacity: box.value < box.to ? 1 : theme.disabledElementsOpacity
+            onPressed: if (box.value < box.to) box.increase()
+            Layout.fillHeight: true
+
+            Behavior on opacity { HNumberAnimation {} }
+        }
     }
 
-    down.indicator: HButton {
-        x: box.mirrored ? parent.width - width : 0
-        height: parent.height
-        font.pixelSize: theme.fontSize.biggest
-        text: qsTr("-")
-        autoRepeat: true
-        autoRepeatInterval: 50
-
-        onPressed: box.decrease()
-    }
-
-    up.indicator: HButton {
-        x: box.mirrored ? 0 : parent.width - width
-        height: parent.height
-        font.pixelSize: theme.fontSize.biggest
-        text: qsTr("+")
-        autoRepeat: true
-        autoRepeatInterval: 50
-
-        onPressed: box.increase()
-    }
+    down.indicator: null
+    up.indicator: null
 
     MouseArea {
         anchors.fill: parent
@@ -65,7 +76,7 @@ SpinBox {
         cursorShape: textField.hovered ? Qt.IBeamCursor : Qt.ArrowCursor
         onWheel: wheel => {
             wheel.angleDelta.y < 0 ? box.decrease() : box.increase()
-            wheel.accepted()
+            wheel.accepted = true
         }
     }
 }