diff --git a/components/Label.qml b/components/Label.qml
index 30ff3d33..ac5c92ec 100644
--- a/components/Label.qml
+++ b/components/Label.qml
@@ -35,19 +35,21 @@ Item {
     property alias color: label.color
     property alias textFormat: label.textFormat
     property string tipText: ""
-    property int fontSize: 12
+    property int fontSize: 16 * scaleRatio
     property alias wrapMode: label.wrapMode
+    property alias horizontalAlignment: label.horizontalAlignment
     signal linkActivated()
-    width: icon.x + icon.width
-    height: icon.height
+    width: icon.x + icon.width * scaleRatio
+    height: icon.height * scaleRatio
+    Layout.topMargin: 10 * scaleRatio
 
     Text {
         id: label
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 2
+        anchors.bottomMargin: 2 * scaleRatio
         anchors.left: parent.left
         font.family: "Arial"
-        font.pixelSize: parent.fontSize
+        font.pixelSize: fontSize
         color: "#555555"
         onLinkActivated: item.linkActivated()
     }
@@ -56,7 +58,7 @@ Item {
         id: icon
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: label.right
-        anchors.leftMargin: 5
+        anchors.leftMargin: 5 * scaleRatio
         source: "../images/whatIsIcon.png"
         visible: appWindow.whatIsEnable
     }
diff --git a/components/LineEdit.qml b/components/LineEdit.qml
index 3760fd2a..f7cb0612 100644
--- a/components/LineEdit.qml
+++ b/components/LineEdit.qml
@@ -36,13 +36,13 @@ Item {
     property alias readOnly : input.readOnly
     property alias cursorPosition: input.cursorPosition
     property alias echoMode: input.echoMode
-    property int fontSize: 18
+    property int fontSize: 18 * scaleRatio
     property bool error: false
     signal editingFinished()
     signal accepted();
     signal textUpdated();
 
-    height: 37
+    height: 37 * scaleRatio
 
     function getColor(error) {
       if (error)
@@ -53,14 +53,14 @@ Item {
 
     Rectangle {
         anchors.fill: parent
-        anchors.bottomMargin: 1
+        anchors.bottomMargin: 1 * scaleRatio
         color: "#DBDBDB"
         //radius: 4
     }
 
     Rectangle {
         anchors.fill: parent
-        anchors.topMargin: 1
+        anchors.topMargin: 1 * scaleRatio
         color: getColor(error)
         //radius: 4
     }
@@ -68,8 +68,8 @@ Item {
     Input {
         id: input
         anchors.fill: parent
-        anchors.leftMargin: 4
-        anchors.rightMargin: 30
+        anchors.leftMargin: 4 * scaleRatio
+        anchors.rightMargin: 30 * scaleRatio
         font.pixelSize: parent.fontSize
         onEditingFinished: item.editingFinished()
         onAccepted: item.accepted();
diff --git a/components/MenuButton.qml b/components/MenuButton.qml
index a7baa019..0e33057c 100644
--- a/components/MenuButton.qml
+++ b/components/MenuButton.qml
@@ -42,7 +42,7 @@ Rectangle {
         var offset = 0
         var item = button
         while (item.under) {
-            offset += 20
+            offset += 20 * scaleRatio
             item = item.under
         }
         return offset
@@ -50,7 +50,7 @@ Rectangle {
 
     color: checked ? "#FFFFFF" : "#1C1C1C"
     property bool present: !under || under.checked || checked || under.numSelectedChildren > 0
-    height: present ? ((appWindow.height >= 800) ? 64 : 52) : 0
+    height: present ? ((appWindow.height >= 800) ? 64 * scaleRatio  : 52 * scaleRatio ) : 0
 
     transform: Scale {
         yScale: button.present ? 1 : 0
@@ -76,18 +76,18 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.leftMargin: parent.getOffset()
-        width: 50
+        width: 50 * scaleRatio
 
         Rectangle {
             id: dot
             anchors.centerIn: parent
-            width: 16
+            width: 16 * scaleRatio
             height: width
             radius: height / 2
 
             Rectangle {
                 anchors.centerIn: parent
-                width: 12
+                width: 12 * scaleRatio
                 height: width
                 radius: height / 2
                 color: "#1C1C1C"
@@ -98,7 +98,7 @@ Rectangle {
         Text {
             id: symbolText
             anchors.centerIn: parent
-            font.pixelSize: 11
+            font.pixelSize: 11 * scaleRatio
             font.bold: true
             color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
             visible: appWindow.ctrlPressed
@@ -117,7 +117,7 @@ Rectangle {
     Image {
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: 20 * scaleRatio
         anchors.leftMargin: parent.getOffset()
         source: "../images/menuIndicator.png"
     }
@@ -126,9 +126,9 @@ Rectangle {
         id: label
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: parent.getOffset() + 50
+        anchors.leftMargin: parent.getOffset() + 50 * scaleRatio
         font.family: "Arial"
-        font.pixelSize: 18
+        font.pixelSize: 18 * scaleRatio
         color: parent.checked ? "#000000" : "#FFFFFF"
     }
 
diff --git a/components/MobileHeader.qml b/components/MobileHeader.qml
index 73b22430..0cd9c5e6 100644
--- a/components/MobileHeader.qml
+++ b/components/MobileHeader.qml
@@ -10,17 +10,16 @@ Rectangle {
     anchors.leftMargin: 1
     anchors.rightMargin: 1
     Layout.fillWidth: true
-    Layout.preferredHeight: 64
+    Layout.preferredHeight: 64 * scaleRatio
     color: "#FFFFFF"
-//    visible: basicMode
 
     Image {
         id: logo
-        visible: appWindow.width > 460
+        visible: appWindow.width > 460 * scaleRatio
         anchors.verticalCenter: parent.verticalCenter
         anchors.verticalCenterOffset: -5
         anchors.left: parent.left
-        anchors.leftMargin: appWindow.persistentSettings.customDecorations ? 20 : 40
+        anchors.leftMargin: 50 * scaleRatio
         source: "../images/moneroLogo2.png"
     }
 
@@ -28,9 +27,8 @@ Rectangle {
         id: icon
         visible: !logo.visible
         anchors.verticalCenter: parent.verticalCenter
-//                anchors.verticalCenterOffset: -5
         anchors.left: parent.left
-        anchors.leftMargin: appWindow.persistentSettings.customDecorations ? 20 : 40
+        anchors.leftMargin: 40 * scaleRatio 
         source: "../images/moneroIcon.png"
     }
 
@@ -38,16 +36,16 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.top: parent.top
         anchors.right: parent.right
-        anchors.topMargin: 10
-        width: 256
+        anchors.topMargin: 10 * scaleRatio
+        width: 256 * scaleRatio
         columns: 3
 
         Text {
             id: balanceLabel
-            width: 116
-            height: 20
+            width: 116 * scaleRatio
+            height: 20 * scaleRatio
             font.family: "Arial"
-            font.pixelSize: 12
+            font.pixelSize: 12 * scaleRatio
             font.letterSpacing: -1
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignLeft
@@ -58,10 +56,10 @@ Rectangle {
 
         Text {
             id: balanceText
-            width: 110
-            height: 20
+            width: 110 * scaleRatio
+            height: 20 * scaleRatio
             font.family: "Arial"
-            font.pixelSize: 18
+            font.pixelSize: 18 * scaleRatio
             font.letterSpacing: -1
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignLeft
@@ -71,8 +69,8 @@ Rectangle {
         }
 
         Item {
-            height: 20
-            width: 20
+            height: 20 * scaleRatio
+            width: 20 * scaleRatio
 
             Image {
                 anchors.verticalCenter: parent.verticalCenter
@@ -82,10 +80,10 @@ Rectangle {
         }
 
         Text {
-            width: 116
-            height: 20
+            width: 116 * scaleRatio
+            height: 20 * scaleRatio
             font.family: "Arial"
-            font.pixelSize: 12
+            font.pixelSize: 12 * scaleRatio
             font.letterSpacing: -1
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignLeft
@@ -96,10 +94,10 @@ Rectangle {
 
         Text {
             id: availableBalanceText
-            width: 110
-            height: 20
+            width: 110 * scaleRatio
+            height: 20 * scaleRatio
             font.family: "Arial"
-            font.pixelSize: 14
+            font.pixelSize: 14 * scaleRatio
             font.letterSpacing: -1
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignLeft
diff --git a/components/NetworkStatusItem.qml b/components/NetworkStatusItem.qml
index 5ba77585..ac2d2568 100644
--- a/components/NetworkStatusItem.qml
+++ b/components/NetworkStatusItem.qml
@@ -60,37 +60,44 @@ Row {
         return qsTr("Invalid connection status")
     }
 
-    Item {
-        id: iconItem
-        anchors.bottom: parent.bottom
-        width: 50
-        height: 50
 
-        Image {
-            anchors.centerIn: parent
-            source: getConnectionStatusImage(item.connected)
+    color: "#1C1C1C"
+    Row {
+        height: 60 * scaleRatio
+        Item {
+            id: iconItem
+            anchors.bottom: parent.bottom
+            width: 50 * scaleRatio
+            height: 50 * scaleRatio
+
+            Image {
+                anchors.centerIn: parent
+                source: getConnectionStatusImage(item.connected)
+            }
+        }
+
+        Column {
+            anchors.bottom: parent.bottom
+            height: 53 * scaleRatio
+            spacing: 3 * scaleRatio
+
+            Text {
+                anchors.left: parent.left
+                font.family: "Arial"
+                font.pixelSize: 12 * scaleRatio
+                color: "#545454"
+                text: qsTr("Network status") + translationManager.emptyString
+            }
+
+            Text {
+                anchors.left: parent.left
+                font.family: "Arial"
+                font.pixelSize: 18 * scaleRatio
+                color: getConnectionStatusColor(item.connected)
+                text: getConnectionStatusString(item.connected) + translationManager.emptyString
+            }
         }
     }
 
-    Column {
-        anchors.bottom: parent.bottom
-        height: 53
-        spacing: 3
 
-        Text {
-            anchors.left: parent.left
-            font.family: "Arial"
-            font.pixelSize: 12
-            color: "#545454"
-            text: qsTr("Network status") + translationManager.emptyString
-        }
-
-        Text {
-            anchors.left: parent.left
-            font.family: "Arial"
-            font.pixelSize: 18
-            color: getConnectionStatusColor(item.connected)
-            text: getConnectionStatusString(item.connected) + translationManager.emptyString
-        }
-    }
 }
diff --git a/components/PasswordDialog.qml b/components/PasswordDialog.qml
index db9654cb..62e3a31a 100644
--- a/components/PasswordDialog.qml
+++ b/components/PasswordDialog.qml
@@ -53,8 +53,8 @@ Window {
     }
 
     // TODO: implement without hardcoding sizes
-    width: 480
-    height: walletName ? 240 : 200
+//    width: isMobile ? screenWidth : 480
+//    height: isMobile ? screenHeight - mobileHeader.height : walletName ? 240 : 200
 
     // Make window draggable
     MouseArea {
@@ -68,7 +68,7 @@ Window {
     ColumnLayout {
         id: mainLayout
         spacing: 10
-        anchors { fill: parent; margins: 35 }
+        anchors { fill: parent; margins: 35 * scaleRatio }
 
         ColumnLayout {
             id: column
@@ -81,20 +81,20 @@ Window {
                 Layout.columnSpan: 2
                 Layout.fillWidth: true
                 horizontalAlignment: Text.AlignHCenter
-                font.pixelSize: 24
+                font.pixelSize: 24 * scaleRatio
                 font.family: "Arial"
                 color: "#555555"
             }
 
             TextField {
                 id : passwordInput
-                focus: true
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
+                Layout.maximumWidth: 400 * scaleRatio
                 horizontalAlignment: TextInput.AlignHCenter
                 verticalAlignment: TextInput.AlignVCenter
                 font.family: "Arial"
-                font.pixelSize: 32
+                font.pixelSize: 32 * scaleRatio
                 echoMode: TextInput.Password
                 KeyNavigation.tab: okButton
 
@@ -142,13 +142,11 @@ Window {
         // Ok/Cancel buttons
         RowLayout {
             id: buttons
-            spacing: 60
+            spacing: 60 * scaleRatio
             Layout.alignment: Qt.AlignHCenter
             
             MoneroComponents.StandardButton {
                 id: cancelButton
-                width: 120
-                fontSize: 14
                 shadowReleasedColor: "#FF4304"
                 shadowPressedColor: "#B32D00"
                 releasedColor: "#FF6C3C"
@@ -162,8 +160,6 @@ Window {
             }
             MoneroComponents.StandardButton {
                 id: okButton
-                width: 120
-                fontSize: 14
                 shadowReleasedColor: "#FF4304"
                 shadowPressedColor: "#B32D00"
                 releasedColor: "#FF6C3C"
diff --git a/components/ProcessingSplash.qml b/components/ProcessingSplash.qml
index 2f6725db..17091204 100644
--- a/components/ProcessingSplash.qml
+++ b/components/ProcessingSplash.qml
@@ -38,8 +38,8 @@ Window {
     property alias messageText: messageTitle.text
     property alias heightProgressText : heightProgress.text
 
-    width: 200
-    height: 100
+    width: 200 * scaleRatio
+    height: 100 * scaleRatio
     opacity: 0.7
 
     ColumnLayout {
@@ -49,8 +49,8 @@ Window {
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
 
-        anchors.leftMargin: 30
-        anchors.rightMargin: 30
+        anchors.leftMargin: 30 * scaleRatio
+        anchors.rightMargin: 30 * scaleRatio
 
         BusyIndicator {
             running: parent.visible
@@ -61,7 +61,7 @@ Window {
             id: messageTitle
             text: "Please wait..."
             font {
-                pixelSize: 22
+                pixelSize: 22 * scaleRatio
             }
             horizontalAlignment: Text.AlignHCenter
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
@@ -72,7 +72,7 @@ Window {
         Text {
             id: heightProgress
             font {
-                pixelSize: 18
+                pixelSize: 18 * scaleRatio
             }
             horizontalAlignment: Text.AlignHCenter
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
diff --git a/components/StandardButton.qml b/components/StandardButton.qml
index 33cedee7..c55ebb12 100644
--- a/components/StandardButton.qml
+++ b/components/StandardButton.qml
@@ -31,19 +31,19 @@ import QtQuick.Layouts 1.1
 
 Item {
     id: button
-    height: 37
+    height: 37 * scaleRatio
     property string shadowPressedColor
     property string shadowReleasedColor
     property string pressedColor
     property string releasedColor
     property string icon: ""
     property string textColor: "#FFFFFF"
-    property int fontSize: 12
+    property int fontSize: 12 * scaleRatio
     property alias text: label.text
     signal clicked()
 
     // Dynamic label width
-    Layout.minimumWidth: (label.contentWidth > 80)? label.contentWidth + 20 : 100
+    Layout.minimumWidth: (label.contentWidth + 10 * scaleRatio)  //  (label.contentWidth > 80)? label.contentWidth + 20 : 100
 
     Rectangle {
         anchors.left: parent.left
diff --git a/components/StandardDialog.qml b/components/StandardDialog.qml
index 681c2d3d..5c62919c 100644
--- a/components/StandardDialog.qml
+++ b/components/StandardDialog.qml
@@ -68,8 +68,8 @@ Window {
     }
 
     // TODO: implement without hardcoding sizes
-    width:  480
-    height: 280
+    width: isMobile ? screenWidth : 480
+    height: isMobile ? screenHeight : 280
 
     ColumnLayout {
         id: mainLayout
@@ -84,7 +84,7 @@ Window {
             Label {
                 id: dialogTitle
                 horizontalAlignment: Text.AlignHCenter
-                font.pixelSize: 32
+                font.pixelSize: 32 * scaleRatio
                 font.family: "Arial"
                 color: "#555555"
             }
@@ -99,7 +99,7 @@ Window {
                 font.family: "Arial"
                 textFormat: TextEdit.AutoText
                 readOnly: true
-                font.pixelSize: 12
+                font.pixelSize: 12 * scaleRatio
             }
         }
 
@@ -111,8 +111,6 @@ Window {
 
             MoneroComponents.StandardButton {
                 id: cancelButton
-                width: 120
-                fontSize: 14
                 shadowReleasedColor: "#FF4304"
                 shadowPressedColor: "#B32D00"
                 releasedColor: "#FF6C3C"
@@ -126,8 +124,6 @@ Window {
 
             MoneroComponents.StandardButton {
                 id: okButton
-                width: 120
-                fontSize: 14
                 shadowReleasedColor: "#FF4304"
                 shadowPressedColor: "#B32D00"
                 releasedColor: "#FF6C3C"
diff --git a/components/StandardDropdown.qml b/components/StandardDropdown.qml
index 50b60fe0..f8b41d9d 100644
--- a/components/StandardDropdown.qml
+++ b/components/StandardDropdown.qml
@@ -38,7 +38,7 @@ Item {
     property string textColor: "#FFFFFF"
     property alias currentIndex: column.currentIndex
     property bool expanded: false
-    height: 37
+    height: 37 * scaleRatio
 
     onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
     function hide() { dropdown.expanded = false }
@@ -59,7 +59,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        height: 37
+        height: 37 * scaleRatio
 
         Rectangle {
             anchors.left: parent.left
@@ -82,8 +82,8 @@ Item {
         Rectangle {
             anchors.left: parent.left
             anchors.bottom: parent.bottom
-            height: 3
-            width: 3
+            height: 3 * scaleRatio
+            width: 3 * scaleRatio
             color: dropdown.pressedColor
             visible: dropdown.expanded || droplist.height > 0
         }
@@ -91,8 +91,8 @@ Item {
         Rectangle {
             anchors.right: parent.right
             anchors.bottom: parent.bottom
-            height: 3
-            width: 3
+            height: 3 * scaleRatio
+            width: 3 * scaleRatio
             color: dropdown.pressedColor
             visible: dropdown.expanded || droplist.height > 0
         }
@@ -101,11 +101,11 @@ Item {
             id: firstColText
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 12
+            anchors.leftMargin: 12 * scaleRatio
             elide: Text.ElideRight
             font.family: "Arial"
             font.bold: true
-            font.pixelSize: 12
+            font.pixelSize: 12 * scaleRatio
             color: "#FFFFFF"
             text: column.currentIndex < repeater.model.rowCount() ? qsTr(repeater.model.get(column.currentIndex).column1) + translationManager.emptyString : ""
         }
@@ -114,10 +114,10 @@ Item {
             id: secondColText
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: separator.left
-            anchors.rightMargin: 12
+            anchors.rightMargin: 12 * scaleRatio
             width: dropdown.expanded ? w : (separator.x - 12) - (firstColText.x + firstColText.width + 5)
             font.family: "Arial"
-            font.pixelSize: 12
+            font.pixelSize: 12 * scaleRatio
             color: "#FFFFFF"
             text: column.currentIndex < repeater.model.rowCount() ? qsTr(repeater.model.get(column.currentIndex).column2) + translationManager.emptyString : ""
 
@@ -129,7 +129,7 @@ Item {
             id: separator
             anchors.right: dropIndicator.left
             anchors.verticalCenter: parent.verticalCenter
-            height: 18
+            height: 18 * scaleRatio
             width: 1
             color: "#FFFFFF"
         }
@@ -139,12 +139,12 @@ Item {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.right: parent.right
-            width: 32
+            width: 32 * scaleRatio
 
             Image {
                 anchors.centerIn: parent
                 source: "../images/whiteDropIndicator.png"
-                rotation: dropdown.expanded ? 180 : 0
+                rotation: dropdown.expanded ? 180  * scaleRatio : 0
             }
         }
 
@@ -168,14 +168,14 @@ Item {
         Rectangle {
             anchors.left: parent.left
             anchors.top: parent.top
-            width: 3; height: 3
+            width: 3 * scaleRatio; height: 3 * scaleRatio
             color: dropdown.pressedColor
         }
 
         Rectangle {
             anchors.right: parent.right
             anchors.top: parent.top
-            width: 3; height: 3
+            width: 3 * scaleRatio; height: 3 * scaleRatio
             color: dropdown.pressedColor
         }
 
@@ -209,7 +209,7 @@ Item {
                 delegate: Rectangle {
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    height: 30
+                    height: 30 * scaleRatio
                     //radius: index === repeater.count - 1 ? 4 : 0
                     color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
 
@@ -217,11 +217,11 @@ Item {
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.left: parent.left
                         anchors.right: col2Text.left
-                        anchors.leftMargin: 12
-                        anchors.rightMargin: column2.length > 0 ? 12 : 0
+                        anchors.leftMargin: 12 * scaleRatio
+                        anchors.rightMargin: column2.length > 0 ? 12  * scaleRatio: 0
                         font.family: "Arial"
                         font.bold: true
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * scaleRatio
                         color: "#FFFFFF"
                         text: qsTr(column1) + translationManager.emptyString
                     }
@@ -230,9 +230,9 @@ Item {
                         id: col2Text
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
-                        anchors.rightMargin: 45
+                        anchors.rightMargin: 45 * scaleRatio
                         font.family: "Arial"
-                        font.pixelSize: 12
+                        font.pixelSize: 12 * scaleRatio
                         color: "#FFFFFF"
                         text: column2
                     }
@@ -240,14 +240,14 @@ Item {
                     Rectangle {
                         anchors.left: parent.left
                         anchors.top: parent.top
-                        width: 3; height: 3
+                        width: 3 * scaleRatio; height: 3 * scaleRatio
                         color: parent.color
                     }
 
                     Rectangle {
                         anchors.right: parent.right
                         anchors.top: parent.top
-                        width: 3; height: 3
+                        width: 3 * scaleRatio; height: 3 * scaleRatio
                         color: parent.color
                     }
 
diff --git a/components/TickDelegate.qml b/components/TickDelegate.qml
index 3b256a2d..4e9789a4 100644
--- a/components/TickDelegate.qml
+++ b/components/TickDelegate.qml
@@ -49,7 +49,7 @@ Item {
             anchors.bottomMargin: 2
             font.family: "Arial"
             font.bold: true
-            font.pixelSize: 12
+            font.pixelSize: 12 * scaleRatio
             color: "#4A4949"
             text: {
                 if(currentIndex === 0) return qsTr("Normal") + translationManager.emptyString
diff --git a/components/TitleBar.qml b/components/TitleBar.qml
index 34f25e73..8f147322 100644
--- a/components/TitleBar.qml
+++ b/components/TitleBar.qml
@@ -37,7 +37,7 @@ Rectangle {
     property alias basicButtonVisible: goToBasicVersionButton.visible
     property bool customDecorations: true
     signal goToBasicVersion(bool yes)
-    height: customDecorations ? 30 : 0
+    height: customDecorations && !isMobile ? 30 : 0
     y: -height
     property string title
     property alias maximizeButtonVisible: maximizeButton.visible
@@ -59,7 +59,7 @@ Rectangle {
         anchors.top: parent.top
         anchors.left: parent.left
         color:  basicMouseArea.containsMouse || !leftPanel.visible ? "#FFE00A" : "#000000"
-        height: 30
+        height: 30 * scaleRatio
         width: height
         visible: isMobile