Widen the Quick Settings panel to fit the tab labels

shell/plugins/panels/quick-settings/QuickSettings.qml

@@ -254,7 +254,7 @@ Item {
       anchors.top: parent.top
       anchors.topMargin: Style.spaceReal(10) + root.barInset
       anchors.horizontalCenter: parent.horizontalCenter
-      implicitWidth: Style.spaceReal(400)
+      implicitWidth: Math.max(Style.spaceReal(520), tabBar.requiredWidth + padding * 2)
       fillColor: Util.alpha(Color.background, Style.panelFillAlpha)
       spacing: Style.spaceReal(12)
 
@@ -268,6 +268,7 @@ Item {
       }
 
       TabBar {
+        id: tabBar
         width: parent.width
         tabs: root.tabs
         currentTab: root.currentTab

shell/plugins/panels/quick-settings/TabBar.qml

@@ -9,9 +9,21 @@ Row {
   property string currentTab: ""
   signal tabRequested(string tabId)
 
+  readonly property real widestTabWidth: {
+    var widest = 0
+    for (var index = 0; index < tabRepeater.count; index++) {
+      var tab = tabRepeater.itemAt(index)
+      if (tab) widest = Math.max(widest, tab.implicitWidth)
+    }
+    return widest
+  }
+  readonly property real requiredWidth: root.widestTabWidth * root.tabs.length
+    + root.spacing * Math.max(0, root.tabs.length - 1)
+
   spacing: Style.spaceReal(6)
 
   Repeater {
+    id: tabRepeater
     model: root.tabs
 
     Button {