NCircleStat + KeyboardLayout: converted to Layout

Modules/Bar/Widgets/KeyboardLayout.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
 import Quickshell.Wayland
 import Quickshell.Io
@@ -6,7 +7,7 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-Row {
+RowLayout {
   id: root
 
   property ShellScreen screen
@@ -18,12 +19,17 @@ Row {
   // Use the shared service for keyboard layout
   property string currentLayout: KeyboardLayoutService.currentLayout
 
-  width: pill.width
-  height: pill.height
+  Layout.preferredWidth: pill.implicitWidth
+  Layout.preferredHeight: pill.implicitHeight
+  spacing: 0
 
   NPill {
     id: pill
 
+    Layout.alignment: Qt.AlignCenter
+    Layout.fillWidth: false
+    Layout.fillHeight: false
+
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: "keyboard_alt"
     iconCircleColor: Color.mPrimary
@@ -33,7 +39,6 @@ Row {
     tooltipText: "Keyboard layout: " + currentLayout
 
     onClicked: {
-
       // You could open keyboard settings here if needed
       // For now, just show the current layout
     }

Widgets/NCircleStat.qml

@@ -1,9 +1,10 @@
 import QtQuick
+import QtQuick.Layouts
 import qs.Commons
 import qs.Services
 import qs.Widgets
 
-// Compact circular statistic display used in the SidePanel
+// Compact circular statistic display using Layout management
 Rectangle {
   id: root
 
@@ -28,20 +29,20 @@ Rectangle {
   // Repaint gauge when the bound value changes
   onValueChanged: gauge.requestPaint()
 
-  Row {
-    id: innerRow
+  ColumnLayout {
+    id: mainLayout
     anchors.fill: parent
     anchors.margins: Style.marginS * scaling * contentScale
-    spacing: Style.marginS * scaling * contentScale
-    anchors.horizontalCenter: parent.horizontalCenter
-    anchors.verticalCenter: parent.verticalCenter
+    spacing: 0
 
-    // Gauge with percentage label placed inside the open gap (right side)
+    // Main gauge container
     Item {
-      id: gaugeWrap
-      anchors.verticalCenter: innerRow.verticalCenter
-      width: 68 * scaling * contentScale
-      height: 68 * scaling * contentScale
+      id: gaugeContainer
+      Layout.fillWidth: true
+      Layout.fillHeight: true
+      Layout.alignment: Qt.AlignCenter
+      Layout.preferredWidth: 68 * scaling * contentScale
+      Layout.preferredHeight: 68 * scaling * contentScale
 
       Canvas {
         id: gauge
@@ -84,15 +85,13 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
       }
 
-      // Tiny circular badge for the icon, inside the right-side gap
+      // Tiny circular badge for the icon, positioned using anchors within the gauge
       Rectangle {
         id: iconBadge
         width: 28 * scaling * contentScale
         height: width
         radius: width / 2
         color: Color.mSurface
-        // border.color: Color.mPrimary
-        // border.width: Math.max(1, Style.borderS * scaling)
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.rightMargin: -6 * scaling * contentScale