WEB-620:fix datatable tab layout dark theme #3040

shubhamkumar9199 · 2026-01-23T09:01:34Z

Fixed UI inconsistencies and dark theme support in the datatable single-row component to improve user experience and maintain design consistency across the application.

WEB-620
Before:

After:

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

If you have multiple commits please combine them into one commit by squashing them.
Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

New Features
- Added dark theme support with adaptive styling.
Style
- Restructured header layout with improved spacing and alignment.
- Enhanced visual consistency across light and dark modes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-23T09:01:54Z

Note

`.coderabbit.yaml` has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

The datatable-single-row component's template and SCSS were updated: the header and action buttons were restructured into a single horizontal row, and dark-theme styling and color variable usage were added/adjusted for headings, data items, and labels.

Changes

Cohort / File(s)	Summary
Datatable Single-Row Component `src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html`, `src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss`	HTML: header and action buttons moved into one horizontal row with gap/alignment classes; button grouping changed from vertical to horizontal. SCSS: added dark-theme overrides for h3, `.data-item`, `.data-label`, `.data-value`; replaced hardcoded color with `$accent`; removed `delete-button` rule and adjusted spacing/hover styles and box-shadow in dark mode. Pay attention to DOM structure changes and theme-specific selectors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

WEB-434-fix: add visible hover effect for table rows in dark mode #2815 — Introduces/adjusts dark-theme hover styles for table/row elements; may overlap with the dark-mode styling changes here.

Suggested reviewers

IOhacker
alberto-art3ch

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main changes: fixing datatable tab layout and adding dark theme support, which aligns with the restructured HTML and expanded SCSS dark theme styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss`:
- Around line 24-26: Remove the unused .delete-button CSS rule from
datatable-single-row.component.scss: delete the entire ".delete-button {
margin-left: 8px; }" block (or consolidate it into an existing button style if
spacing is needed), and search for any future references to .delete-button in
the datatable single-row template or other components to ensure no breakage; if
the delete button should keep the styling instead, add the .delete-button class
to the delete button element in the datatable single-row template (or move the
margin rule into its existing button selector such as the component's delete
button class).

🧹 Nitpick comments (3)

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html (2)
18-27: Consider combining duplicate conditions.

Lines 18 and 23 both check the same condition dataObject.data[0]. These could be combined into a single @if block containing both buttons for cleaner code.
♻️ Suggested refactor
-      `@if` (dataObject.data[0]) {
-        <button mat-raised-button color="primary" (click)="edit()">
-          <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-        </button>
-      }
-      `@if` (dataObject.data[0]) {
-        <button mat-raised-button color="warn" (click)="delete()">
-          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-        </button>
-      }
+      `@if` (dataObject.data[0]) {
+        <button mat-raised-button color="primary" (click)="edit()">
+          <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+        </button>
+        <button mat-raised-button color="warn" (click)="delete()">
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
+        </button>
+      }
37-37: Consider using a unique property for track expression.

Tracking by object reference (track columnHeader) may cause unnecessary re-renders if the columnHeaders array is recreated. As per coding guidelines, prefer tracking by a unique identifier.
♻️ Suggested improvement
-          `@for` (columnHeader of dataObject.columnHeaders; track columnHeader; let i = $index) {
+          `@for` (columnHeader of dataObject.columnHeaders; track columnHeader.columnName; let i = $index) {
src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss (1)
20-22: Overuse of !important in dark theme overrides.

Multiple !important declarations are used for dark theme color overrides. While sometimes necessary for theme switching, excessive use can make styles harder to maintain. Consider increasing selector specificity instead if possible.

For example, instead of:
:host-context(.dark-theme) .data-label {
  color: rgb(255 255 255 / 70%) !important;
}
You could try nesting within .tab-container to increase specificity:
:host-context(.dark-theme) .tab-container .data-label {
  color: rgb(255 255 255 / 70%);
}
Also applies to: 77-79, 97-99

...pp/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

improve

IOhacker

Lgtm

alberto-art3ch

Please see my comments

alberto-art3ch · 2026-01-23T14:27:22Z

...pp/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

-    margin-left: 1%;
+  h3 {
+    margin: 0;
+  }


Please lets try to use the styles in central files If that applies

alberto-art3ch · 2026-01-23T14:28:20Z

...pp/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

  &:hover {
    background-color: rgb(0 0 0 / 4%);
-    border-left-color: var(--primary-color, #3f51b5);
+    border-left-color: $accent;


Same here, there are some common scss files

coderabbitai bot reviewed Jan 23, 2026

View reviewed changes

...pp/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss Outdated Show resolved Hide resolved

WEB-620:fix datatable tab layout dark theme

748d6b8

improve

shubhamkumar9199 force-pushed the fix/datatable-tab-layout-dark-theme branch from bfa21e9 to 748d6b8 Compare January 23, 2026 09:06

IOhacker approved these changes Jan 23, 2026

View reviewed changes

alberto-art3ch requested changes Jan 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WEB-620:fix datatable tab layout dark theme #3040

WEB-620:fix datatable tab layout dark theme #3040

Uh oh!

shubhamkumar9199 commented Jan 23, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 23, 2026 •

edited

Loading

`.coderabbit.yaml` has unrecognized properties

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

IOhacker left a comment

Uh oh!

alberto-art3ch left a comment

Uh oh!

alberto-art3ch Jan 23, 2026

Uh oh!

alberto-art3ch Jan 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

WEB-620:fix datatable tab layout dark theme #3040

Are you sure you want to change the base?

WEB-620:fix datatable tab layout dark theme #3040

Uh oh!

Conversation

shubhamkumar9199 commented Jan 23, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

.coderabbit.yaml has unrecognized properties

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

IOhacker left a comment

Choose a reason for hiding this comment

Uh oh!

alberto-art3ch left a comment

Choose a reason for hiding this comment

Uh oh!

alberto-art3ch Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

alberto-art3ch Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shubhamkumar9199 commented Jan 23, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 23, 2026 •

edited

Loading

`.coderabbit.yaml` has unrecognized properties