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)
         }
       }
     }