From afab02a0533655bb9b970af059b01172192d9f7b Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 5 Feb 2026 15:27:45 +0200 Subject: [PATCH] feat(webapp): add blurry background to sticky data table cells Add backdrop-filter blur effect to sticky column cells in financial reports to prevent content from showing through during horizontal scrolling. The effect only applies when rows are not hovered to preserve hover background interactions. --- .../src/style/components/DataTable/DataTable.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss index 8b2a42293..a2e716ae5 100644 --- a/packages/webapp/src/style/components/DataTable/DataTable.scss +++ b/packages/webapp/src/style/components/DataTable/DataTable.scss @@ -385,6 +385,20 @@ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); + body.bp4-dark & { + background: rgba(28, 33, 39, 0.6); + } + } +} + +// Sticky cells in table body: blurred transparent background so content doesn't show through +.bigcapital-datatable.has-sticky { + &.table-constrant .table .tbody .tr:not(:hover) .td[data-sticky-td], + &.table--constrant .table .tbody .tr:not(:hover) .td[data-sticky-td] { + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + body.bp4-dark & { background: rgba(28, 33, 39, 0.6); }