From f91fc7acfab466acb686d5ac5e828cf258fc3b67 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 28 Jan 2026 16:24:37 +0000
Subject: [PATCH 1/3] fix filters chips for dark theme

---
 .../db-table-view/db-table-view.component.css | 24 +++++++++++
 .../saved-filters-panel.component.css         | 42 ++++++++++---------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index 1fbb6c79a..b23ea2504 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -223,6 +223,30 @@
     background-color: #E8ECEE !important;
 }
 
+@media (prefers-color-scheme: dark) {
+	::ng-deep .active-filters .mat-mdc-chip {
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		--mdc-chip-label-text-color: rgba(255, 255, 255, 0.87) !important;
+		background-color: #3a4a5c !important;
+		color: rgba(255, 255, 255, 0.87) !important;
+	}
+
+	::ng-deep .active-filters .mat-mdc-chip:hover {
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
+	}
+
+	::ng-deep .active-filters .mdc-evolution-chip__cell {
+		background-color: #3a4a5c !important;
+	}
+
+	::ng-deep .active-filters .mdc-evolution-chip__cell:hover {
+		background-color: #3a4a5c !important;
+	}
+}
+
 .db-table-manage-columns-button__count {
 	margin-left: 2px;
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
index c16ea7a84..e4f4933a0 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
@@ -366,47 +366,49 @@
 
 @media (prefers-color-scheme: dark) {
 	::ng-deep .static-filter-chip .mat-mdc-chip {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		--mdc-chip-label-text-color: rgba(255, 255, 255, 0.87) !important;
+		background-color: #3a4a5c !important;
+		color: rgba(255, 255, 255, 0.87) !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip:hover {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip:active {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mdc-evolution-chip__cell {
-		background-color: #E8ECEE !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover {
-		background-color: #E8ECEE !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 }
 

From 2ad1198ebba1a8ecbb38a1582be7c809af2caa02 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 29 Jan 2026 12:07:54 +0000
Subject: [PATCH 2/3] table view: increase bottom padding to fit intercome

---
 .../dashboard/db-table-view/db-table-view.component.css         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index b23ea2504..9fd3d514e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -297,7 +297,7 @@
 }
 
 .table-surface {
-	margin-bottom: 24px;
+	margin-bottom: 72px;
 }
 
 @media (prefers-color-scheme: dark) {

From 9a9ba675c007f01ef66f6617a975224f29596235 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 29 Jan 2026 12:19:42 +0000
Subject: [PATCH 3/3] record view: sticky header

---
 .../db-table-row-view/db-table-row-view.component.css       | 6 ++++++
 .../db-table-row-view/db-table-row-view.component.html      | 2 --
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
index 4e72a45c8..74c343fb9 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
@@ -12,6 +12,7 @@
 }
 
 .row-preview-sidebar_open {
+	position: relative;
 	background-color: var(--mat-sidenav-content-background-color);
 	border-left: solid 1px rgba(0, 0, 0, 0.12);
 	opacity: 1;
@@ -40,12 +41,17 @@
 }
 
 .row-preview-sidebar__header {
+	position: sticky;
+	top: 0;
+	background-color: inherit;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	padding-top: 20px;
+	padding-bottom: 20px;
 	padding-left: 16px;
 	padding-right: 16px;
+	z-index: 1;
 }
 
 .row-preview-sidebar__title {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index 55c64baa2..24c1b89d8 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -23,8 +23,6 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
         </button>
     </div>
 
-    <br />
-
     <mat-expansion-panel *ngIf="selectedRow?.relatedRecords?.referenced_by?.length" class="related-records-panel">
         <mat-expansion-panel-header class="related-records-panel__header">
             Related records