Apply Settings Container New Design

angular.json

@@ -45,6 +45,11 @@
             },
             "ssr": {
               "entry": "src/server.ts"
+            },
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
             }
           },
           "configurations": {

src/app/features/settings/popup.scss

@@ -23,9 +23,9 @@
   flex-direction: column;
   gap: 16px;
 
-  padding-bottom: 8px;
+  padding-bottom: 12px;
 
-  section {
+  section.settings-category {
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -42,11 +42,22 @@
       color: oklch(0.6830 0 0); // #999999
     }
 
-    .settings-container {
+    & > .settings-container {
       width: 100%;
-      height: 40px;
       display: flex;
 
+      &:has(> switch) {
+        height: 32px;
+
+        &:nth-child(1 of .settings-container) {
+          margin-top: 4px;
+        }
+      }
+
+      &:has(> dropdown) {
+        height: 40px;
+      }
+
       flex-direction: row;
       align-items: center;
       justify-content: space-between;