From 895d31b653809981a3813bb3272aa1aede3c09f6 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 2 Feb 2026 14:28:12 +0200 Subject: [PATCH 1/3] fix(ui5-table): border visibility on firefox (compat) --- packages/compat/src/themes/Table.css | 22 +++++++++++-------- packages/compat/src/themes/TableColumn.css | 1 - packages/compat/src/themes/TableRow.css | 5 +++-- .../themes/sap_horizon/Table-parameters.css | 1 - .../sap_horizon_hcb/Table-parameters.css | 1 - .../sap_horizon_hcw/Table-parameters.css | 1 - 6 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/compat/src/themes/Table.css b/packages/compat/src/themes/Table.css index a54d35567eab..ec355fd12ff7 100644 --- a/packages/compat/src/themes/Table.css +++ b/packages/compat/src/themes/Table.css @@ -28,9 +28,13 @@ table { } .ui5-table-header-row-navigated { - width: 0.1875rem; - background: var(--sapList_HeaderBackground); - vertical-align: middle; + width: 0.1875rem; + vertical-align: middle; + /* Workaround for known issue with Firefox where table row or cell has position: relative; + https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */ + background: linear-gradient(180deg, + var(--sapList_HeaderBackground) calc(100% - var(--ui5_table_header_row_border_width)), + var(--ui5_table_header_row_border_bottom_color) calc(100% - var(--ui5_table_header_row_border_width))); } .ui5-table-header-row { @@ -39,7 +43,11 @@ table { font-family: var(--sapFontFamily); font-size: var(--sapFontSize); font-weight: var(--ui5_table_header_row_font_weight); - border-bottom: var(--ui5_table_header_row_border_width) solid var(--ui5_table_header_row_border_bottom_color); + /* Workaround for known issue with Firefox where table row or cell has position: relative; + https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */ + background: linear-gradient(180deg, + var(--sapList_HeaderBackground) calc(100% - var(--ui5_table_header_row_border_width)), + var(--ui5_table_header_row_border_bottom_color) calc(100% - var(--ui5_table_header_row_border_width))); } .ui5-table-header-row:focus { @@ -90,10 +98,6 @@ tr { z-index: 98; } -th { - background: var(--sapList_HeaderBackground); -} - .ui5-table-focusarea { position: fixed; -} +} \ No newline at end of file diff --git a/packages/compat/src/themes/TableColumn.css b/packages/compat/src/themes/TableColumn.css index e9eb7eccb079..0632cc50dab7 100644 --- a/packages/compat/src/themes/TableColumn.css +++ b/packages/compat/src/themes/TableColumn.css @@ -3,7 +3,6 @@ } th { - background: var(--sapList_HeaderBackground); width: inherit; font-weight: var(--ui5_table_header_row_font_weight); font-size: var(--sapFontMediumSize); diff --git a/packages/compat/src/themes/TableRow.css b/packages/compat/src/themes/TableRow.css index 90d4f47b0155..90a803046906 100644 --- a/packages/compat/src/themes/TableRow.css +++ b/packages/compat/src/themes/TableRow.css @@ -9,9 +9,10 @@ } .ui5-table-row-root { - background-color: var(--sapList_Background); + /* Workaround for known issue with Firefox where table row or cell has position: relative; + https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */ + background: linear-gradient(180deg, var(--sapList_BorderColor) 1px, var(--sapList_Background) 1px); color: var(--sapList_TextColor); - border-top: 1px solid var(--sapList_BorderColor); position: relative; } diff --git a/packages/compat/src/themes/sap_horizon/Table-parameters.css b/packages/compat/src/themes/sap_horizon/Table-parameters.css index 71a5b0ed32f9..389094c66f61 100644 --- a/packages/compat/src/themes/sap_horizon/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon/Table-parameters.css @@ -3,6 +3,5 @@ :host { --ui5_table_header_row_outline_width: var(--sapContent_FocusWidth); --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); - --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: 0.1875rem; } \ No newline at end of file diff --git a/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css b/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css index 08bafc20f967..d2e983ae0f66 100644 --- a/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css @@ -3,7 +3,6 @@ :host { --ui5_table_header_row_outline_width: 0.125rem; --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); - --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: 0.25rem; --ui5_table_header_row_border_width: 0.1875rem; } \ No newline at end of file diff --git a/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css b/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css index 08bafc20f967..d2e983ae0f66 100644 --- a/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css @@ -3,7 +3,6 @@ :host { --ui5_table_header_row_outline_width: 0.125rem; --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); - --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: 0.25rem; --ui5_table_header_row_border_width: 0.1875rem; } \ No newline at end of file From 4e801038f463b3faa5adda858e80f6f01c8d58b0 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 2 Feb 2026 14:30:40 +0200 Subject: [PATCH 2/3] chore: usage background-image over background --- packages/compat/src/themes/Table.css | 4 ++-- packages/compat/src/themes/TableRow.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/compat/src/themes/Table.css b/packages/compat/src/themes/Table.css index ec355fd12ff7..29259fb64047 100644 --- a/packages/compat/src/themes/Table.css +++ b/packages/compat/src/themes/Table.css @@ -32,7 +32,7 @@ table { vertical-align: middle; /* Workaround for known issue with Firefox where table row or cell has position: relative; https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */ - background: linear-gradient(180deg, + background-image: linear-gradient(180deg, var(--sapList_HeaderBackground) calc(100% - var(--ui5_table_header_row_border_width)), var(--ui5_table_header_row_border_bottom_color) calc(100% - var(--ui5_table_header_row_border_width))); } @@ -45,7 +45,7 @@ table { font-weight: var(--ui5_table_header_row_font_weight); /* Workaround for known issue with Firefox where table row or cell has position: relative; https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */ - background: linear-gradient(180deg, + background-image: linear-gradient(180deg, var(--sapList_HeaderBackground) calc(100% - var(--ui5_table_header_row_border_width)), var(--ui5_table_header_row_border_bottom_color) calc(100% - var(--ui5_table_header_row_border_width))); } diff --git a/packages/compat/src/themes/TableRow.css b/packages/compat/src/themes/TableRow.css index 90a803046906..76e39ba762ab 100644 --- a/packages/compat/src/themes/TableRow.css +++ b/packages/compat/src/themes/TableRow.css @@ -11,7 +11,7 @@ .ui5-table-row-root { /* Workaround for known issue with Firefox where table row or cell has position: relative; https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */ - background: linear-gradient(180deg, var(--sapList_BorderColor) 1px, var(--sapList_Background) 1px); + background-image: linear-gradient(180deg, var(--sapList_BorderColor) 1px, var(--sapList_Background) 1px); color: var(--sapList_TextColor); position: relative; } From 066bfe053a80608051b891c9ef6ec14390c1d737 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 2 Feb 2026 14:36:11 +0200 Subject: [PATCH 3/3] chore: remove parameter --- packages/compat/src/themes/sap_horizon_dark/Table-parameters.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css b/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css index 71a5b0ed32f9..389094c66f61 100644 --- a/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css @@ -3,6 +3,5 @@ :host { --ui5_table_header_row_outline_width: var(--sapContent_FocusWidth); --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); - --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: 0.1875rem; } \ No newline at end of file