ControlCenter: Looks better when it's taller and less wide.

Modules/ControlCenter/Cards/SystemMonitorCard.qml

@@ -9,14 +9,11 @@ import qs.Widgets
 NBox {
   id: root
 
-  GridLayout {
+  RowLayout {
     id: content
     anchors.fill: parent
     anchors.margins: Style.marginXS * scaling
-    columns: 2
+    spacing: Style.marginS * scaling
-    rows: 2
-    columnSpacing: Style.marginS * scaling
-    rowSpacing: Style.marginS * scaling
 
     NCircleStat {
       value: SystemStatService.cpuUsage

Modules/ControlCenter/Cards/TopCard.qml

@@ -105,7 +105,7 @@ NBox {
     GridLayout {
       id: grid
       Layout.fillWidth: true
-      columns: (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 5 : 3
+      columns: (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 4 : 3
       columnSpacing: Style.marginM * scaling
       rowSpacing: Style.marginS * scaling
 

Modules/ControlCenter/ControlCenterPanel.qml

@@ -10,13 +10,13 @@ import qs.Widgets
 NPanel {
   id: root
 
-  preferredWidth: 440
+  preferredWidth: 400
-  preferredHeight: topHeight + bottomHeight + Math.round(Style.marginL * 3)
+  preferredHeight: topHeight + midHeight + bottomHeight + Math.round(Style.marginL * 4)
   panelKeyboardFocus: true
 
-  readonly property int bottomHeight: 196
+  
   readonly property int topHeight: {
-    const columns = (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 5 : 3
+    const columns = (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 4 : 3
     const rowsCount = Math.ceil(Settings.data.controlCenter.widgets.quickSettings.length / columns)
 
     var buttonHeight
@@ -30,6 +30,9 @@ NPanel {
 
     return (rowsCount * buttonHeight) + 120
   }
+  readonly property int midHeight: 220
+  readonly property int bottomHeight: 80
+
 
   // Positioning
   readonly property string controlCenterPosition: Settings.data.controlCenter.position
@@ -59,24 +62,16 @@ NPanel {
         Layout.preferredHeight: topHeight * scaling
       }
 
-      // Media + stats column
+      // Media card
-      RowLayout {
+      MediaCard {
-        id: bottomCard
+        Layout.fillWidth: true
+        Layout.preferredHeight: midHeight * scaling
+      }
+
+      // System monitors combined in one card
+      SystemMonitorCard {
         Layout.fillWidth: true
         Layout.preferredHeight: bottomHeight * scaling
-        spacing: content.cardSpacing
-
-        // Media card
-        MediaCard {
-          Layout.preferredWidth: Math.max(250 * scaling)
-          Layout.preferredHeight: bottomHeight * scaling
-        }
-
-        // System monitors combined in one card
-        SystemMonitorCard {
-          Layout.preferredWidth: Math.max(140 * scaling)
-          Layout.preferredHeight: bottomHeight * scaling
-        }
       }
     }
   }