Skip to content

Global table CSS rule in bar.css affects application tables #615

@jsepela

Description

@jsepela

Tracy 2.13-dev introduces a global CSS rule in src/Tracy/Bar/assets/bar.css:63 that affects all tables on the page, not just Tracy tables:

table {
	background: #FDF5CE;
	width: 100%;
}

This CSS rule is applied globally and overwrites application table styling, causing all tables (including DataGrids, user tables, etc.) to have yellow background #FDF5CE.

Expected behavior

Tracy CSS should only affect Tracy UI elements, not application elements.

Proposed solution

The rule should be scoped to Tracy elements:

.tracy-bs table,
body.tracy-debug table {
	background: #FDF5CE;
	width: 100%;
}

Or remove the global table rule entirely since line 25 already has:

body.tracy-debug table { background: #FDF5CE; width: 100%; }

Workaround

Application developers can override this with:

table:not(.tracy-bs table):not([id^="tracy-"]) {
	background: transparent !important;
}

Environment

  • Tracy version: 2.13-dev (commit 9455f2c)
  • PHP: 8.4.14
  • Browser: Chrome 147

Screenshots

Before fix (yellow background on all tables):

  • Application DataGrid tables have yellow background
  • This affects all <table> elements globally

After fix (transparent background):

  • Only Tracy debug tables have yellow background
  • Application tables maintain their original styling

Related code

https://github.com/nette/tracy/blob/v2.13/src/Tracy/Bar/assets/bar.css#L63-L66

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions