diff --git a/applets/notes/package/contents/ui/main.qml b/applets/notes/package/contents/ui/main.qml
--- a/applets/notes/package/contents/ui/main.qml
+++ b/applets/notes/package/contents/ui/main.qml
@@ -43,9 +43,9 @@
 
     width: units.gridUnit * 14
     height: units.gridUnit * 14
-    Layout.minimumWidth: units.gridUnit * 4
-    Layout.minimumHeight: units.gridUnit * 4
-    Plasmoid.switchWidth: Math.max(units.gridUnit * 13, fontButtons.Layout.preferredWidth)
+    Layout.minimumWidth: units.iconSizes.medium
+    Layout.minimumHeight: units.iconSizes.medium
+    Plasmoid.switchWidth: units.gridUnit * 5
     Plasmoid.switchHeight: units.gridUnit * 5
 
     Plasmoid.backgroundHints: PlasmaCore.Types.NoBackground
@@ -232,20 +232,25 @@
             bottomMargin: verticalMargins
         }
 
+        readonly property int requiredWidth: 6 * toggleFormatBarButton.width + 6 * spacing
+        readonly property bool showFormatButtons: width > requiredWidth
+
         PlasmaComponents.ToolButton {
             id: toggleFormatBarButton
             tooltip: i18n("Toggle text format options")
             iconSource: "draw-text"
             checkable: true
             Accessible.name: tooltip
+            visible: fontButtons.showFormatButtons
         }
 
         PlasmaComponents.ToolButton {
             tooltip: i18n("Bold")
             iconSource: "format-text-bold"
-            opacity: toggleFormatBarButton.checked ? 1 : 0
+            opacity: fontButtons.showFormatButtons && toggleFormatBarButton.checked ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: units.longDuration } }
             enabled: opacity > 0
+            visible: fontButtons.showFormatButtons
 
             checked: documentHandler.bold
             onClicked: documentHandler.bold = !documentHandler.bold
@@ -254,9 +259,10 @@
         PlasmaComponents.ToolButton {
             tooltip: i18n("Italic")
             iconSource: "format-text-italic"
-            opacity: toggleFormatBarButton.checked ? 1 : 0
+            opacity: fontButtons.showFormatButtons && toggleFormatBarButton.checked ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: units.longDuration } }
             enabled: opacity > 0
+            visible: fontButtons.showFormatButtons
 
             checked: documentHandler.italic
             onClicked: documentHandler.italic = !documentHandler.italic
@@ -265,9 +271,10 @@
         PlasmaComponents.ToolButton {
             tooltip: i18n("Underline")
             iconSource: "format-text-underline"
-            opacity: toggleFormatBarButton.checked ? 1 : 0
+            opacity: fontButtons.showFormatButtons && toggleFormatBarButton.checked ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: units.longDuration } }
             enabled: opacity > 0
+            visible: fontButtons.showFormatButtons
 
             checked: documentHandler.underline
             onClicked: documentHandler.underline = !documentHandler.underline
@@ -276,9 +283,10 @@
         PlasmaComponents.ToolButton {
             tooltip: i18n("Strikethrough")
             iconSource: "format-text-strikethrough"
-            opacity: toggleFormatBarButton.checked ? 1 : 0
+            opacity: fontButtons.showFormatButtons && toggleFormatBarButton.checked ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: units.longDuration } }
             enabled: opacity > 0
+            visible: fontButtons.showFormatButtons
 
             checked: documentHandler.strikeOut
             onClicked: documentHandler.strikeOut = !documentHandler.strikeOut