settings: sidebar scaling improvements

quickshell/Modals/Settings/SettingsModal.qml

@@ -343,7 +343,7 @@ FloatingWindow {
                     id: sidebar
 
                     anchors.left: parent.left
-                    width: settingsModal.isCompactMode ? parent.width : 270
+                    width: settingsModal.isCompactMode ? parent.width : sidebar.implicitWidth
                     visible: settingsModal.isCompactMode ? settingsModal.menuVisible : true
                     parentModal: settingsModal
                     currentIndex: settingsModal.currentTabIndex

quickshell/Modals/Settings/SettingsSidebar.qml

@@ -483,11 +483,52 @@ Rectangle {
         return -1;
     }
 
-    width: 270
+    property real __maxTextWidth: Math.max(__m1.advanceWidth, __m2.advanceWidth, __m3.advanceWidth, __m4.advanceWidth, __m5.advanceWidth, __m6.advanceWidth)
+    property real __calculatedWidth: Math.max(270, __maxTextWidth + Theme.iconSize * 2 + Theme.spacingM * 4 + Theme.spacingS * 2)
+
+    implicitWidth: __calculatedWidth
+    width: __calculatedWidth
     height: parent.height
     color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     radius: Theme.cornerRadius
 
+    StyledTextMetrics {
+        id: __m1
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        text: I18n.tr("Workspaces & Widgets")
+    }
+    StyledTextMetrics {
+        id: __m2
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        text: I18n.tr("Typography & Motion")
+    }
+    StyledTextMetrics {
+        id: __m3
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        text: I18n.tr("Keyboard Shortcuts")
+    }
+    StyledTextMetrics {
+        id: __m4
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        text: I18n.tr("Power & Security")
+    }
+    StyledTextMetrics {
+        id: __m5
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        text: I18n.tr("Dock & Launcher")
+    }
+    StyledTextMetrics {
+        id: __m6
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        text: I18n.tr("Personalization")
+    }
+
     function selectSearchResult(result) {
         if (!result)
             return;
@@ -769,10 +810,9 @@ Rectangle {
                         }
 
                         Row {
+                            id: categoryRowContent
                             anchors.left: parent.left
                             anchors.leftMargin: Theme.spacingM
-                            anchors.right: parent.right
-                            anchors.rightMargin: Theme.spacingM
                             anchors.verticalCenter: parent.verticalCenter
                             spacing: Theme.spacingM
 
@@ -789,19 +829,18 @@ Rectangle {
                                 font.weight: (categoryRow.isActive || root.isChildActive(categoryDelegate.modelData)) ? Font.Medium : Font.Normal
                                 color: categoryRow.isActive ? Theme.primaryText : Theme.surfaceText
                                 anchors.verticalCenter: parent.verticalCenter
-                                width: parent.width - Theme.iconSize - Theme.spacingM - (categoryDelegate.modelData.children ? expandIcon.width + Theme.spacingS : 0)
-                                elide: Text.ElideRight
-                                horizontalAlignment: Text.AlignLeft
                             }
+                        }
 
-                            DankIcon {
+                        DankIcon {
-                                id: expandIcon
+                            id: expandIcon
-                                name: root.isCategoryExpanded(categoryDelegate.modelData.id) ? "expand_less" : "expand_more"
+                            name: root.isCategoryExpanded(categoryDelegate.modelData.id) ? "expand_less" : "expand_more"
-                                size: Theme.iconSize - 4
+                            size: Theme.iconSize - 4
-                                color: Theme.surfaceVariantText
+                            color: Theme.surfaceVariantText
-                                anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right
-                                visible: categoryDelegate.modelData.children !== undefined && categoryDelegate.modelData.children.length > 0
+                            anchors.rightMargin: Theme.spacingM
-                            }
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: categoryDelegate.modelData.children !== undefined && categoryDelegate.modelData.children.length > 0
                         }
 
                         MouseArea {
@@ -861,6 +900,7 @@ Rectangle {
                                 }
 
                                 Row {
+                                    id: childRowContent
                                     anchors.left: parent.left
                                     anchors.leftMargin: Theme.spacingL + Theme.spacingM
                                     anchors.verticalCenter: parent.verticalCenter