💄 Optimized settings screen

lib/screens/settings.dart

@@ -449,12 +449,20 @@ class SettingsScreen extends HookConsumerWidget {
 
       // Card background opacity settings
       ListTile(
+        isThreeLine: true,
         minLeadingWidth: 48,
         title: Text('settingsCardBackgroundOpacity').tr(),
         contentPadding: const EdgeInsets.only(left: 24, right: 17),
         leading: const Icon(Symbols.opacity),
         subtitle: Padding(
           padding: const EdgeInsets.only(top: 8),
+          child: SliderTheme(
+            data: SliderThemeData(
+              trackHeight: 2,
+              thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 8),
+              overlayShape: const RoundSliderOverlayShape(overlayRadius: 24),
+              trackShape: RoundedRectSliderTrackShape(),
+            ),
             child: Slider(
               value: settings.cardTransparency,
               min: 0.0,
@@ -470,6 +478,7 @@ class SettingsScreen extends HookConsumerWidget {
             ),
           ),
         ),
+      ),
 
       // Background image settings (only for non-web platforms)
       if (!kIsWeb && docBasepath.value != null)
@@ -512,7 +521,7 @@ class SettingsScreen extends HookConsumerWidget {
               minLeadingWidth: 48,
               title: Text('settingsBackgroundImageEnable').tr(),
               contentPadding: const EdgeInsets.only(left: 24, right: 17),
-              leading: const Icon(Symbols.image),
+              leading: const Icon(Symbols.hide_image),
               trailing: Switch(
                 value: settings.showBackgroundImage,
                 onChanged: (value) {
@@ -821,8 +830,20 @@ class SettingsScreen extends HookConsumerWidget {
               title: Text('settingsWindowOpacity').tr(),
               contentPadding: const EdgeInsets.only(left: 24, right: 17),
               leading: const Icon(Symbols.opacity),
+              isThreeLine: true,
               subtitle: Padding(
                 padding: const EdgeInsets.only(top: 8),
+                child: SliderTheme(
+                  data: SliderThemeData(
+                    trackHeight: 2,
+                    thumbShape: const RoundSliderThumbShape(
+                      enabledThumbRadius: 8,
+                    ),
+                    overlayShape: const RoundSliderOverlayShape(
+                      overlayRadius: 24,
+                    ),
+                    trackShape: RoundedRectSliderTrackShape(),
+                  ),
                   child: Slider(
                     value: settings.windowOpacity,
                     min: 0.1,
@@ -838,17 +859,22 @@ class SettingsScreen extends HookConsumerWidget {
                   ),
                 ),
               ),
+            ),
           ];
 
     // Create a responsive layout based on screen width
     Widget buildSettingsList() {
       if (isWide) {
         // Two-column layout for wide screens
-        return Row(
+        return ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 920),
+          child: Row(
+            spacing: 16,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Expanded(
                 child: Column(
+                  spacing: 16,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     _SettingsSection(
@@ -864,6 +890,7 @@ class SettingsScreen extends HookConsumerWidget {
               ),
               Expanded(
                 child: Column(
+                  spacing: 16,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     _SettingsSection(
@@ -879,10 +906,12 @@ class SettingsScreen extends HookConsumerWidget {
                 ),
               ),
             ],
-        );
+          ).padding(horizontal: 16),
+        ).center();
       } else {
         // Single column layout for narrow screens
         return Column(
+          spacing: 16,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             _SettingsSection(
@@ -903,7 +932,7 @@ class SettingsScreen extends HookConsumerWidget {
                 children: desktopSettings,
               ),
           ],
-        );
+        ).padding(horizontal: 16);
       }
     }
 
@@ -940,7 +969,9 @@ class _SettingsSection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Card(
+      margin: EdgeInsets.zero,
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
@@ -956,6 +987,7 @@ class _SettingsSection extends StatelessWidget {
           ...children,
           const SizedBox(height: 16),
         ],
+      ),
     );
   }
 }