Error Fix: The Compare Diff Panel That Would Not Hide

TLDR

Adding a layout utility class (.diff-layout { display: flex }) caused a compare diff panel to remain permanently visible across all application tabs (PDF, Visual Diff, Analyze). Equal CSS specificity scores ((0, 1, 0)) combined with source order caused .diff-layout to override the tab system's .view-panel { display: none } rule. Scope the selector to .view-panel.diff-layout and strip display: flex from the helper class.

Selector	Specificity Score	Declared Rule	Active State Result
.view-panel (Line 645)	(0, 1, 0)	display: none	Overridden by later .diff-layout rule
.diff-layout (Line 888)	(0, 1, 0)	display: flex	Permanently forces display: flex on all tabs
.view-panel.diff-layout	(0, 2, 0)	flex-direction: column	Respects tab visibility system 100%

---

Technical defect analysis

After introducing .diff-layout to align toolbar elements inside the compare panel, switching tabs failed to hide the diff view. The panel rendered overlaid across all active views.

/ TAB VISIBILITY SYSTEM (Line 645) /
.view-panel {
  display: none;
}
.view-panel.active {   display: flex; }
/ LAYOUT HELPER CLASS (Line 888) / .diff-layout {   display: flex; / FAILS: Equal specificity (0,1,0), written LATER in source file! /   flex-direction: column; }

Because .diff-layout appeared on line 888 with identical specificity ((0, 1, 0)), it won the cascade conflict against .view-panel { display: none } (line 645).

As a result, elements with class view-panel diff-layout remained visible (display: flex) regardless of tab activation state.

---

Remediation: specificity boost & visibility decoupling

Scope the layout class to .view-panel.diff-layout and remove display: flex from the helper rule entirely:

/ REFACTORED: Layout Helper Rule /
.view-panel.diff-layout {
  / display: flex property REMOVED /
  flex-direction: column;
}

Why this fix works

1. Visibility Decoupling: The tab system (.view-panel / .view-panel.active) maintains exclusive ownership over display properties (none vs flex).
2. Layout Direction Scope: .view-panel.diff-layout applies flex-direction: column with higher specificity ((0, 2, 0)), configuring flex direction without altering display visibility state.

Rule of thumb: Never declare display properties inside layout helper classes assigned to visibility-toggled components.