Error Fix: The Compare Diff Panel That Would Not Hide

TLDR: A helper class set display: flex, which beat the visibility system's display: none due to equal specificity and source order. The panel rendered on every tab. Two characters fixed it.

---

Symptom

After adding a .diff-layout CSS class to the compare diff panel, switching to any other tab (PDF, Visual Diff, Analyze) still showed the diff panel overlaid on the active content. The panel was always visible.

---

Root Cause

The tab visibility system:

/ Applied to all panels: /
.view-panel { display: none; }
/ Applied by JS when tab is active: / .view-panel.active { display: flex; }

The new layout helper, added when the diff bar redesign was implemented:

/ Added to styles.css line ~888: /
.diff-layout {
    display: flex;
    flex-direction: column;
}

The diff panel's class list is view-panel diff-layout.

CSS specificity of .view-panel: (0, 1, 0). CSS specificity of .diff-layout: (0, 1, 0).

Equal specificity. Later declaration wins. .diff-layout is on line 888. .view-panel { display: none } is on line 645. .diff-layout wins. The panel is display: flex always.

The .active class override also has specificity (0, 2, 0) and does beat .view-panel { display: none }, but only fires when the tab is active. The always-on .diff-layout { display: flex } fires unconditionally and there is nothing with higher specificity to override it back to none for the inactive state.

---

Wrong Assumption

Initial read of the user's report ("It's not the height... the name that is being referred to is probably compare-diff or something like that") pointed toward an ID mismatch between the HTML element and the JS selector. Checked $('#view-diff') vs id="view-diff" in both HTML files. No mismatch. Wasted a small amount of time on this path before realizing "always visible" is a cascade symptom, not a naming symptom.

---

Fix

/ Before: /
.diff-layout {
    display: flex;
    flex-direction: column;
}
/ After: / .view-panel.diff-layout {     flex-direction: column; }

Two changes:

1. Add .view-panel to the selector, making specificity (0, 2, 0). This means .view-panel { display: none } (0, 1, 0) cannot override it, but it also means this rule only applies to elements that have both classes, not every .diff-layout element.
2. Remove display: flex. The layout helper class has no business controlling visibility. Only the active-tab system should set display.

With this fix, inactive diff panels receive flex-direction: column (harmless when not displayed), and display: none from .view-panel is never overridden. Active panels receive display: flex from .view-panel.active (specificity (0, 2, 0), same as the diff-layout rule, but later in the file so it wins).

---

Guard

Any CSS helper class added to an element that participates in a show/hide system must not set display. If the helper class needs to establish a flex or grid layout, move display to the rule that controls visibility, or use a more specific selector.

Quick check before adding layout classes: search for display: in the rule body. If it is there and the element is visibility-toggled by another class, remove it.

---

Lesson

"Always visible" always means display is being set somewhere you did not intend. Before investigating IDs, selectors, or JS logic, check the cascade first. One rule with equal specificity and a later source position is enough to break an entire visibility system.