style(category-management): improve layout and styling of dialog components

apps/web/src/app/xtream-tauri/category-management-dialog/category-management-dialog.component.html

@@ -32,7 +32,11 @@
             </div>
         </div>
 
-        <mat-form-field appearance="outline" class="search-field">
+        <mat-form-field
+            appearance="outline"
+            class="search-field"
+            subscriptSizing="dynamic"
+        >
             <mat-icon matPrefix>search</mat-icon>
             <input
                 matInput
@@ -59,7 +63,9 @@
                     >
                     </mat-checkbox>
                     <span class="category-name">{{ category.name }}</span>
-                    <span class="item-count">({{ getItemCount(category) }})</span>
+                    <span class="item-count"
+                        >({{ getItemCount(category) }})</span
+                    >
                 </div>
             } @empty {
                 <div class="empty-message">

apps/web/src/app/xtream-tauri/category-management-dialog/category-management-dialog.component.scss

@@ -1,3 +1,13 @@
+::ng-deep .mat-mdc-dialog-content {
+    overflow: hidden !important;
+}
+
+.mat-mdc-dialog-content {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
 .loading-container {
     display: flex;
     flex-direction: column;
@@ -11,7 +21,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
     flex-wrap: wrap;
     gap: 12px;
 }
@@ -53,7 +62,7 @@
 .category-item {
     display: flex;
     align-items: center;
-    padding: 6px 12px;
+    padding: 2px 10px;
     cursor: pointer;
     gap: 8px;
     transition: background-color 0.12s ease;
@@ -79,12 +88,6 @@
     text-overflow: ellipsis;
 }
 
-.item-count {
-    opacity: 0.6;
-    font-size: 12px;
-    color: var(--mat-sys-on-surface-variant);
-}
-
 .empty-message {
     padding: 24px;
     text-align: center;