/* Mounting Top Gear inside a page it does not own. On its own host the app IS the page: body is a full-height flex column and the table fills whatever is left. Mounted into a site shell it is one block among several, and two of its assumptions stop holding — it has no full-height flex parent, and it is no longer the only thing that scrolls. Shared by every host that mounts it, so the assumptions are repaired once. Nothing host-specific belongs here: no console rules, no page-level widths. */ /* No box. NPB 3D — the first app through this shell — runs full-bleed, and an app in a bordered panel reads as a widget embedded in a document rather than as the thing the page is for. The panel was my framing, not the contract's. The shell already draws the only chrome there should be (§13). */ #npb-app.topgear{background:transparent} /* core's .main is flex:1, which resolves to ZERO outside that full-height column — and .view inside it is absolutely positioned to inset:0, so the table collapses to nothing while still reporting every row in the DOM. A mounting host owes it an explicit height; max-height alone leaves flex:1 resolving to 0. */ /* core's .main is flex:1, which resolves to ZERO outside the full-height flex column the app has on its own host — and .view inside it is absolutely positioned to inset:0, so the table collapses to nothing while still reporting every row in the DOM. A mounting host owes it a height. Fill the viewport under the shell rather than taking a fixed slice of it: that is how the app behaves on its own host, where it owns the window and scrolls internally. --chrome-h is measured by shell.js into the real height of the sticky topbar and nav; the second term is the page heading above. */ #npb-app.topgear .main{ /* Measured, not guessed: on this shell the page heading, the as-at line and the view tabs put the table region 403px down the page. A height of 100vh minus the chrome left its bottom 102px BELOW the fold — and with it the horizontal scrollbar, so a table wider than the screen could be seen to be cut off and not reached. The subtraction has to cover everything above the table, not just the site chrome. */ height:calc(100vh - 425px); min-height:340px; overflow:hidden; } /* Sticky against the app's own scroller, not the page's. */ #npb-app.topgear .toolbar{ position:sticky; top:0; z-index:3; background:var(--plane); } /* The factsheet overlay is fixed to the viewport and moves itself to on open, so it is unaffected by the mount — but the app's own scrollbars are still behind it, and a page that scrolls under a modal is a small horror. */ body.fs-open{overflow:hidden} /* The state line and the as-at stamp belong to a mounted page: on its own host the app has a toolbar badge for this, and there is nothing to say about loading because the data is already in the file. */ .tg-bar{display:flex;align-items:center;gap:12px;margin:0 0 10px} .tg-asof{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums} .statebox{ margin:0 0 14px;padding:12px 14px;border-radius:var(--r-btn); border:1px solid var(--line);background:var(--plane); font-size:13px;line-height:1.5;color:var(--ink-2); } .statebox.bad{border-color:var(--neg);background:var(--neg-bg);color:var(--neg)} /* Shown while the price curves are being fetched. Opening an empty chart and filling it in afterwards would be indistinguishable from a fund that has no history — which is a real state this page also shows. */ .fs-loading{ max-width:1055px;margin:0 auto;padding:36px 20px;text-align:center; font-size:13px;color:var(--ink-3); } /* The fund universe is wider than any screen, so the table scrolls sideways. Scrolling right with the name gone leaves rows of numbers belonging to nothing, so the name column and the row controls stay put. */ /* A sticky cell must be opaque or the scrolled columns show through it, so it cannot simply be transparent like its neighbours. It has to be painted the SAME colour as the ground the rest of the row sits on — measured, the pinned cells were #ffffff against the rows' #f4f5f8, which is the stripe André saw. The table area is given the app's own ground explicitly and the pinned cells take the same token, so the two cannot drift apart again. */ #npb-app.topgear .view{background:var(--bg)} #npb-app.topgear table.funds th.selcol, #npb-app.topgear table.funds td.selcol, #npb-app.topgear table.funds td.namecell{position:sticky;z-index:11;background:var(--bg)} #npb-app.topgear table.funds th.selcol, #npb-app.topgear table.funds td.selcol{left:0} #npb-app.topgear table.funds td.namecell{left:38px} #npb-app.topgear table.funds thead th.selcol, #npb-app.topgear table.funds thead th:nth-child(2){position:sticky;z-index:12;background:var(--bg3)} #npb-app.topgear table.funds thead th:nth-child(2){left:38px} #npb-app.topgear table.funds tr:hover td.namecell, #npb-app.topgear table.funds tr:hover td.selcol{background:var(--hover-bg)} #npb-app.topgear table.funds tr.sel td.namecell, #npb-app.topgear table.funds tr.sel td.selcol{background:var(--sel-bg)}