diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html
index 375ef6d6d..4d4f30e2e 100644
--- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html
@@ -32,26 +32,29 @@
-
- search
+
+
@for (category of filteredCategories(); track category.id) {
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
index f617e264d..2f1944edf 100644
--- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
@@ -43,17 +43,74 @@
}
}
-.search-field {
- width: 100%;
+.search-inline {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 10px;
+ min-height: 36px;
+ border-radius: 10px;
+ border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+ background: var(--app-search-bg, var(--mat-sys-surface-container));
+ cursor: text;
+ transition:
+ border-color 0.15s ease,
+ box-shadow 0.15s ease;
- mat-icon[matPrefix] {
- margin-right: 8px;
+ &:focus-within {
+ border-color: var(--mat-sys-primary);
+ box-shadow: 0 0 0 3px
+ color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+ }
+}
+
+.search-inline__icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: var(--mat-sys-on-surface-variant);
+ flex-shrink: 0;
+}
+
+.search-inline input {
+ flex: 1;
+ border: none;
+ outline: none;
+ background: transparent;
+ color: var(--mat-sys-on-surface);
+ font: inherit;
+ font-size: 0.84rem;
+ width: 100%;
+ min-width: 0;
+
+ &::placeholder {
color: var(--mat-sys-on-surface-variant);
+ opacity: 0.6;
+ }
+
+ &::-webkit-search-cancel-button {
+ display: none;
+ }
+}
+
+.search-inline__clear {
+ width: 24px;
+ height: 24px;
+ min-width: 24px;
+ line-height: 24px;
+ flex-shrink: 0;
+ padding: 0;
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
}
}
.categories-list {
- height: 450px;
+ flex: 1;
+ min-height: 200px;
overflow-y: auto;
border: 1px solid var(--mat-sys-outline-variant);
border-radius: 8px;
@@ -62,9 +119,10 @@
.category-item {
display: flex;
align-items: center;
- padding: 2px 10px;
+ padding: 0 10px;
+ min-height: 30px;
cursor: pointer;
- gap: 8px;
+ gap: 6px;
transition: background-color 0.12s ease;
&:hover {
@@ -76,7 +134,7 @@
}
mat-checkbox {
- --mdc-checkbox-state-layer-size: 32px;
+ --mdc-checkbox-state-layer-size: 28px;
}
}
@@ -99,7 +157,7 @@
.mat-mdc-dialog-content {
min-width: 480px;
max-width: 600px;
- max-height: 75vh !important;
+ max-height: 85vh !important;
}
}
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts
index e00a7901b..44e1cac81 100644
--- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts
@@ -1,5 +1,4 @@
import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import {
@@ -7,9 +6,7 @@ import {
MatDialogModule,
MatDialogRef,
} from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar';
import { TranslatePipe } from '@ngx-translate/core';
@@ -32,11 +29,8 @@ interface CategoryWithSelection extends XCategoryFromDb {
MatDialogModule,
MatButtonModule,
MatCheckboxModule,
- MatFormFieldModule,
MatIconModule,
- MatInputModule,
MatProgressSpinnerModule,
- FormsModule,
TranslatePipe,
],
templateUrl: './category-management-dialog.component.html',