ControlCenter: height & layout changes

Modules/ControlCenter/Cards/MediaCard.qml

@@ -119,7 +119,7 @@ NBox {
 
   ColumnLayout {
     anchors.fill: parent
-    anchors.margins: Style.marginL * scaling
+    anchors.margins: Style.marginM * scaling
 
     // No media player detected
     ColumnLayout {
@@ -225,7 +225,7 @@ NBox {
       id: main
 
       visible: MediaService.currentPlayer && MediaService.canPlay
-      spacing: Style.marginM * scaling
+      spacing: Style.marginS * scaling
 
       // Player selector
       Rectangle {
@@ -296,7 +296,7 @@ NBox {
 
       // Spacer to push content down
       Item {
-        Layout.fillHeight: true
+        Layout.preferredHeight: Style.marginM * scaling
       }
 
       // Metadata at the bottom left
@@ -308,7 +308,7 @@ NBox {
         NText {
           visible: MediaService.trackTitle !== ""
           text: MediaService.trackTitle
-          pointSize: Style.fontSizeXL * scaling
+          pointSize: Style.fontSizeM * scaling
           font.weight: Style.fontWeightBold
           elide: Text.ElideRight
           wrapMode: Text.Wrap
@@ -320,7 +320,7 @@ NBox {
           visible: MediaService.trackArtist !== ""
           text: MediaService.trackArtist
           color: Color.mPrimary
-          pointSize: Style.fontSizeL * scaling
+          pointSize: Style.fontSizeS * scaling
           elide: Text.ElideRight
           Layout.fillWidth: true
         }
@@ -410,7 +410,7 @@ NBox {
 
       // Media controls
       RowLayout {
-        spacing: Style.marginM * scaling
+        spacing: Style.marginS * scaling
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
 

Modules/ControlCenter/Cards/SystemMonitorCard.qml

@@ -9,24 +9,22 @@ import qs.Widgets
 NBox {
   id: root
 
-  ColumnLayout {
+  GridLayout {
     id: content
-    anchors.left: parent.left
-    anchors.right: parent.right
-    anchors.top: parent.top
-    anchors.leftMargin: Style.marginS * scaling
-    anchors.rightMargin: Style.marginS * scaling
-    anchors.topMargin: Style.marginXS * scaling
-    anchors.bottomMargin: Style.marginM * scaling
-    spacing: Style.marginS * scaling
+    anchors.fill: parent
+    anchors.margins: Style.marginXS * scaling
+    columns: 2
+    rows: 2
+    columnSpacing: Style.marginS * scaling
+    rowSpacing: Style.marginS * scaling
 
     NCircleStat {
       value: SystemStatService.cpuUsage
       icon: "cpu-usage"
       flat: true
       contentScale: 0.8
-      width: 72 * scaling
-      height: 68 * scaling
+      Layout.fillWidth: true
+      Layout.fillHeight: true
     }
     NCircleStat {
       value: SystemStatService.cpuTemp
@@ -34,24 +32,24 @@ NBox {
       icon: "cpu-temperature"
       flat: true
       contentScale: 0.8
-      width: 72 * scaling
-      height: 68 * scaling
+      Layout.fillWidth: true
+      Layout.fillHeight: true
     }
     NCircleStat {
       value: SystemStatService.memPercent
       icon: "memory"
       flat: true
       contentScale: 0.8
-      width: 72 * scaling
-      height: 68 * scaling
+      Layout.fillWidth: true
+      Layout.fillHeight: true
     }
     NCircleStat {
       value: SystemStatService.diskPercent
       icon: "storage"
       flat: true
       contentScale: 0.8
-      width: 72 * scaling
-      height: 68 * scaling
+      Layout.fillWidth: true
+      Layout.fillHeight: true
     }
   }
 }

Modules/ControlCenter/ControlCenterPanel.qml

@@ -11,7 +11,7 @@ NPanel {
   id: root
 
   preferredWidth: 460
-  preferredHeight: 688
+  preferredHeight: 580
   panelKeyboardFocus: true
 
   // Positioning
@@ -51,19 +51,19 @@ NPanel {
       // Media + stats column
       RowLayout {
         Layout.fillWidth: true
-        Layout.preferredHeight: Math.max(304 * scaling)
+        Layout.preferredHeight: Math.max(196 * scaling)
         spacing: content.cardSpacing
 
         // Media card
         MediaCard {
-          Layout.fillWidth: true
+          Layout.preferredWidth: Math.max(260 * scaling)
           Layout.fillHeight: true
         }
 
         // System monitors combined in one card
         SystemMonitorCard {
-          Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling
-          Layout.fillHeight: true
+          Layout.preferredWidth: Math.max(160 * scaling)
+          Layout.preferredHeight: Math.max(196 * scaling)
         }
       }
     }

Widgets/NCircleStat.qml

@@ -11,7 +11,6 @@ Rectangle {
   property real value: 0 // 0..100 (or any range visually mapped)
   property string icon: ""
   property string suffix: "%"
-
   // When nested inside a parent group (NBox), you can make it flat
   property bool flat: false
   // Scales the internal content (labels, gauge, icon) without changing the
@@ -47,25 +46,31 @@ Rectangle {
         id: gauge
         anchors.fill: parent
         renderStrategy: Canvas.Cooperative
+
         onPaint: {
           const ctx = getContext("2d")
           const w = width, h = height
           const cx = w / 2, cy = h / 2
           const r = Math.min(w, h) / 2 - 5 * scaling * contentScale
-          // 240° arc with a 120° gap centered on the right side
-          // Start at 60° and end at 300° → balanced right-side opening
-          const start = Math.PI / 3
-          const endBg = Math.PI * 5 / 3
+
+          // Rotated 90° to the right: gap at the bottom
+          // Start at 150° and end at 390° (30°) → bottom opening
+          const start = Math.PI * 5 / 6 // 150°
+          const endBg = Math.PI * 13 / 6 // 390° (equivalent to 30°)
+
           ctx.reset()
           ctx.lineWidth = 6 * scaling * contentScale
+
           // Track uses surfaceVariant for stronger contrast
           ctx.strokeStyle = Color.mSurface
           ctx.beginPath()
           ctx.arc(cx, cy, r, start, endBg)
           ctx.stroke()
+
           // Value arc
           const ratio = Math.max(0, Math.min(1, root.value / 100))
           const end = start + (endBg - start) * ratio
+
           ctx.strokeStyle = Color.mPrimary
           ctx.beginPath()
           ctx.arc(cx, cy, r, start, end)
@@ -77,6 +82,7 @@ Rectangle {
       NText {
         id: valueLabel
         anchors.centerIn: parent
+        anchors.verticalCenterOffset: -4 * scaling * contentScale
         text: `${root.value}${root.suffix}`
         pointSize: Style.fontSizeM * scaling * contentScale
         font.weight: Style.fontWeightBold
@@ -84,24 +90,23 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
       }
 
-      // Tiny circular badge for the icon, positioned using anchors within the gauge
+      // Tiny circular badge for the icon, positioned inside below the percentage
       Rectangle {
         id: iconBadge
-        width: iconText.implicitWidth + Style.marginXS * scaling
+        width: iconText.implicitWidth + Style.marginXXS * scaling
         height: width
         radius: width / 2
         color: Color.mPrimary
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.rightMargin: -2 * scaling
-        anchors.topMargin: -2 * scaling
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: valueLabel.bottom
+        anchors.topMargin: 8 * scaling * contentScale
 
         NIcon {
           id: iconText
           anchors.centerIn: parent
           icon: root.icon
           color: Color.mOnPrimary
-          pointSize: Style.fontSizeM * scaling
+          pointSize: Style.fontSizeS * scaling
           horizontalAlignment: Text.AlignHCenter
           verticalAlignment: Text.AlignVCenter
         }