fix(amm): contain compact navbar controls

apps/amm/qml/NavBar.qml

@@ -1,6 +1,4 @@
 import QtQuick 2.15
-import QtQuick.Layouts 1.15
-
 import Logos.Theme
 import Logos.Wallet
 
@@ -11,6 +9,7 @@ Item {
 
     property int currentIndex: 0
     readonly property var tabs: ["Trade", "Liquidity"]
+    readonly property bool compactLayout: width < 480
 
     // Wallet wiring, passed down from Main.qml.
     property var backend: null
@@ -36,72 +35,80 @@ Item {
             color: Theme.palette.borderSecondary
         }
 
-        RowLayout {
+        // App identity
-            anchors.fill: parent
+        Text {
-            anchors.leftMargin:  20
+            id: appTitle
-            anchors.rightMargin: 20
+
+            objectName: "navAppTitle"
+            anchors.left: parent.left
+            anchors.leftMargin: 20
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.width >= 600
+            text: "Logos AMM"
+            color: Theme.palette.text
+            font.pixelSize: 17
+            font.weight: Font.Bold
+        }
+
+        // Tab pills stay centered independently of title and wallet widths.
+        Row {
+            anchors.centerIn: parent
             spacing: 4
 
-            // App identity
+            Repeater {
-            Text {
+                model: root.tabs
-                text: "Logos AMM"
-                color: Theme.palette.text
-                font.pixelSize: 17
-                font.weight: Font.Bold
-            }
 
-            Item { Layout.fillWidth: true }
+                delegate: Rectangle {
+                    required property int index
+                    required property string modelData
+                    readonly property bool active: root.currentIndex === index
 
-            // Tab pills
+                    objectName: "navTab" + index
-            Row {
+                    height: 36
-                spacing: 4
+                    width: tabLabel.implicitWidth + (root.compactLayout ? 16 : 28)
+                    radius: 18
+                    color: active ? Theme.palette.backgroundSecondary : "transparent"
 
-                Repeater {
+                    Behavior on color { ColorAnimation { duration: 150 } }
-                    model: root.tabs
 
-                    delegate: Rectangle {
+                    Text {
-                        readonly property bool active: root.currentIndex === index
+                        id: tabLabel
-
+                        anchors.centerIn: parent
-                        height: 36
+                        text: modelData
-                        width:  tabLabel.implicitWidth + 28
+                        color: active ? Theme.palette.text : Theme.palette.textSecondary
-                        radius: 18
+                        font.pixelSize: root.compactLayout ? 13 : 14
-                        color:  active ? Theme.palette.backgroundSecondary : "transparent"
+                        font.weight: active ? Font.Medium : Font.Normal
 
                         Behavior on color { ColorAnimation { duration: 150 } }
+                    }
 
-                        Text {
+                    MouseArea {
-                            id: tabLabel
+                        anchors.fill: parent
-                            anchors.centerIn: parent
+                        cursorShape: Qt.PointingHandCursor
-                            text:        modelData
+                        onClicked: {
-                            color:       active ? Theme.palette.text : Theme.palette.textSecondary
+                            root.currentIndex = index
-                            font.pixelSize: 14
+                            root.tabChanged(index)
-                            font.weight: active ? Font.Medium : Font.Normal
-
-                            Behavior on color { ColorAnimation { duration: 150 } }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                root.currentIndex = index
-                                root.tabChanged(index)
-                            }
                         }
                     }
                 }
             }
+        }
 
-            // Wallet / account control on the far right.
+        // Wallet / account control on the far right.
-            WalletControl {
+        WalletControl {
-                id: accountControl
+            id: accountControl
-                Layout.leftMargin: 12
+
-                wallet: root.backend
+            anchors.right: parent.right
-                accountModel: root.accountModel
+            anchors.rightMargin: root.compactLayout ? 8 : 20
-                viewportWidth: root.width
+            anchors.verticalCenter: parent.verticalCenter
-                watchCall: function(result, success, failure) {
+            width: implicitWidth
-                    logos.watch(result, success, failure)
+            height: implicitHeight
-                }
+            compact: root.compactLayout
+            wallet: root.backend
+            accountModel: root.accountModel
+            viewportWidth: root.width
+            watchCall: function(result, success, failure) {
+                logos.watch(result, success, failure)
             }
         }
     }

apps/amm/tests/qml/tst_NavBar.qml

@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtTest
+
+import "../../qml" as Amm
+
+Item {
+    id: root
+
+    width: 320
+    height: 56
+
+    Component {
+        id: navComponent
+
+        Amm.NavBar {
+            width: root.width
+            height: root.height
+        }
+    }
+
+    TestCase {
+        name: "NavBar"
+        when: windowShown
+
+        function test_compactControlsStayInsideViewport() {
+            const nav = createTemporaryObject(navComponent, root)
+            verify(nav)
+            const trade = findChild(nav, "navTab0")
+            const liquidity = findChild(nav, "navTab1")
+            const wallet = findChild(nav, "walletConnectButton")
+            verify(trade)
+            verify(liquidity)
+            verify(wallet)
+
+            const controls = [trade, liquidity, wallet]
+            for (let index = 0; index < controls.length; ++index) {
+                const position = controls[index].mapToItem(nav, 0, 0)
+                verify(position.x >= 0)
+                verify(position.x + controls[index].width <= nav.width)
+            }
+            verify(trade.mapToItem(nav, trade.width, 0).x
+                   <= liquidity.mapToItem(nav, 0, 0).x)
+            verify(liquidity.mapToItem(nav, liquidity.width, 0).x
+                   <= wallet.mapToItem(nav, 0, 0).x)
+        }
+    }
+}