Keep the close X usable on columns with hidden titles

[zattak1]

The problem

A column with Q_columns_hideTitle has no close X, so once it is open there is no way to close it.

ddf3149 ("Replace JavaScript height calculations with CSS Flexbox") stops the title from taking vertical space on such columns by hiding it outright — web/css/Communities.css:

/* Handle hidden title case */
.Communities .Q_columns_column.Q_columns_hideTitle .Q_columns_title {
    display: none;
}

But Q/web/css/tools/columns.css puts .Q_close inside the title, and for hidden titles it deliberately keeps the X visible while hiding only the inner container:

.Q_columns_hideTitle .Q_close { opacity: 1; }
.Q_columns_hideTitle .Q_columns_title .Q_close::before { color: #eee; }
.Q_columns_hideTitle .Q_columns_title_container { display: none; }

display: none on the title takes the X down with it. The opacity: 1 rule above is left with nothing to act on.

Repro

1. Open any Communities page that opens a column with Q_columns_hideTitle (the event detail column on a Calendars-backed page is the one we hit).
2. No close X in the column's top-right corner.
3. In the console, document.querySelector('.Q_columns_hideTitle .Q_columns_title').getBoundingClientRect() returns 0 x 0.

Present on main today; introduced by ddf3149.

The fix

Keep the title rendered, but take it out of the column's flex flow and shrink it to a 50×50 overlay in the top-right corner. The height fix is preserved — the title still occupies no vertical space and pushes nothing down — and the X comes back.

pointer-events: none on the overlay keeps it from swallowing clicks meant for the column content; .Q_close opts back in.

No JS changes, and nothing outside the Q_columns_hideTitle case is touched.

Why the overlay anchors correctly

Q/web/js/tools/columns.js sets position on every column as it opens — absolute on mobile, relative otherwise:

if (Q.info.isMobile) {
    $div.css('position', 'absolute');
} else if ($div.css('position') === 'static') {
    $div.css('position', 'relative');
}

So each column is already a containing block and the overlay resolves against its own column, not against the columns tool. No extra position rule is needed.

Verification

Checked on a live two-column desktop layout (Q_notMobile, event detail open as Q_column_1):

• The title overlay measures 50×50 at the detail column's top-right, not the tool's — offsetParent is the column itself.
• elementFromPoint at the X's centre returns .Q_close.
• elementFromPoint over the column body returns the content tool, confirming the overlay does not intercept content clicks.
• The X renders with opacity: 1, as columns.css intends.

Unrelated, noted in passing

On our install the X's <img> stays at the lazy-load placeholder (Q/img/throbbers/transparent.gif) with data-lazyload-src pointing at Q/img/x.png, so even with this fix the glyph can come up blank depending on lazy-load behaviour. That is a separate issue in the lazy-load path rather than anything to do with these rules, and this PR does not touch it.