fix mobile layout for saved filters row, active filters and condition inputs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: lyubov-voloshko

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

@@ -759,26 +759,41 @@
 	display: none !important;
 }
 
+.saved-filters-row__mobile-actions {
+	display: none;
+}
+
 @media (width <= 600px) {
 	.saved-filters-row {
 		display: flex;
+		flex-direction: column;
 		align-items: flex-start;
 		gap: 8px;
 	}
 
 	.saved-filters-row > app-saved-filters-panel {
-		flex: 1 1 auto;
+		flex: 0 1 auto;
 		min-width: 0;
 		display: block;
 	}
 
+	.saved-filters-row__mobile-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		/* grow to fill the row so the buttons sit on the far right; panel keeps its natural width to avoid overlapping .saved-filters-trigger_active */
+		flex: 1 1 auto;
+		min-width: 0;
+		width: 100%;
+		margin-bottom: -44px;
+	}
+
 	.mobile-sort-button {
 		display: inline-flex !important;
 		align-items: center;
-		gap: 4px;
 		flex: 0 0 auto;
 		min-height: 36px;
-		padding: 0 10px;
+		padding: 0 4px;
 		font-size: 13px;
 		font-weight: 500;
 	}
@@ -902,6 +917,13 @@
 	margin-bottom: 12px;
 }
 
+@media (width <= 600px) {
+	.active-filters {
+		margin-top: -12px;
+		margin-bottom: 16px;
+	}
+}
+
 ::ng-deep .active-filters .mat-mdc-chip {
 	--mdc-chip-container-color: #e8ecee !important;
 	--mdc-chip-elevated-container-color: #e8ecee !important;
@@ -965,14 +987,6 @@
 	}
 }
 
-.active-filters {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 8px;
-	margin-bottom: 12px;
-}
-
 .db-table-active-filter-chip ::ng-deep .mdc-evolution-chip__text-label {
 	max-width: 300px;
 	overflow: hidden;
@@ -1026,6 +1040,7 @@
 @media (width <= 600px) {
 	.db-table {
 		grid-template-columns: minmax(0, 120px) 1fr !important;
+		grid-row-gap: 8px;
 		background: transparent !important;
 	}
 
@@ -1042,6 +1057,10 @@
 		box-shadow: none !important;
 	}
 
+	.table-surface ::ng-deep mat-paginator {
+		margin-top: 20px;
+	}
+
 	.table-box {
 		background: transparent;
 	}

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html

@@ -285,6 +285,23 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
 </div>
 
 <div class="saved-filters-row">
+    <div class="saved-filters-row__mobile-actions">
+        <button mat-icon-button type="button" *ngIf="tableData && tableData.displayedColumns && tableData.columns"
+            class="saved-filters-row__columns"
+            matTooltip="Columns"
+            (click)="openColumnsSheet()">
+            <mat-icon fontSet="material-symbols-outlined">view_week</mat-icon>
+        </button>
+
+        <button mat-button type="button" *ngIf="tableData && tableData.displayedDataColumns?.length"
+            class="mobile-sort-button"
+            [ngClass]="{'mobile-sort-button_active': sort.active && sort.direction}"
+            (click)="openSortSheet()">
+            <mat-icon fontSet="material-symbols-outlined">swap_vert</mat-icon>
+            <span class="mobile-sort-button__label">Sort by</span>
+        </button>
+    </div>
+
     <app-saved-filters-panel *ngIf="tableData && tableData.structure && tableData.widgets"
         [connectionID]="connectionID"
         [selectedTableName]="name"
@@ -295,21 +312,6 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
         [tableTypes]="tableData.tableTypes"
         (filterSelected)="onFilterSelected($event)"
     ></app-saved-filters-panel>
-
-    <button mat-icon-button type="button" *ngIf="tableData && tableData.displayedColumns && tableData.columns"
-        class="saved-filters-row__columns"
-        matTooltip="Columns"
-        (click)="openColumnsSheet()">
-        <mat-icon fontSet="material-symbols-outlined">view_week</mat-icon>
-    </button>
-
-    <button mat-button type="button" *ngIf="tableData && tableData.displayedDataColumns?.length"
-        class="mobile-sort-button"
-        [ngClass]="{'mobile-sort-button_active': sort.active && sort.direction}"
-        (click)="openSortSheet()">
-        <mat-icon fontSet="material-symbols-outlined">swap_vert</mat-icon>
-        <span class="mobile-sort-button__label">Sort by</span>
-    </button>
 </div>
 
 <!-- Table View -->

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css

@@ -735,6 +735,20 @@
 	flex: 0 0 auto;
 }
 
+/* ndc-dynamic renders the component as a sibling and leaves an empty anchor element behind; keep it from taking up flex space */
+.condition-card__inputs > ndc-dynamic {
+	flex: 0 0 auto;
+	width: auto;
+}
+
+/* the actual component is rendered as the sibling right after the anchor; let it (and its host child) fill the available space */
+.condition-card__inputs > ndc-dynamic + *,
+.condition-card__inputs ::ng-deep ndc-dynamic + * {
+	flex: 1 1 0;
+	width: 100%;
+	min-width: 0;
+}
+
 .comparator-trigger__symbol {
 	display: none;
 }
@@ -770,6 +784,20 @@
 	min-width: 0;
 }
 
+/* ndc-dynamic renders the component as a sibling and leaves an empty anchor element behind; keep it from taking up flex space */
+.condition-card__value > ndc-dynamic {
+	flex: 0 0 auto;
+	width: auto;
+}
+
+/* the actual component is rendered as the sibling right after the anchor; let it (and its host child) fill the available space */
+.condition-card__value > ndc-dynamic + *,
+.condition-card__value ::ng-deep ndc-dynamic + * {
+	flex: 1 1 0;
+	width: 100%;
+	min-width: 0;
+}
+
 .condition-card__value ::ng-deep .full-width {
 	width: 100%;
 }

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css

@@ -30,6 +30,25 @@
 		display: inline-flex;
 	}
 
+	.saved-filters-trigger_active {
+		width: calc(100vw - 130px - 2*24px);
+		box-sizing: border-box;
+	}
+
+	/* let the button's label shrink and ellipsis when it can't fit into calc(100% - 130px) */
+	.saved-filters-trigger_active ::ng-deep .mdc-button__label {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.saved-filters-trigger_active .saved-filters-trigger__label {
+		max-width: none;
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+
 	.create-filter-button,
 	.saved-filters-tabs {
 		display: none !important;
@@ -301,7 +320,8 @@
 		flex-direction: row;
 		flex-wrap: wrap;
 		gap: 6px;
-		margin: 8px 0 16px;
+		margin-top: 0;
+		margin-bottom: 16px;
 		padding: 8px 16px;
 		border-radius: 10px;
 		background: rgba(0, 0, 0, 0.03);