fix(print): fix app-wide printing and remove a global print-CSS leak
Root cause of blank/clipped print output across the app: the document root (html/body) is globally locked to one viewport height with overflow hidden, and Angular Material's drawer/tab-body containers each add their own on-screen scroll clip on top of that. main.scss now frees the full chain for print (document root, CDK drawer/sidenav containers, mat-tab-body, and the account-view's mat-tab-nav-bar which was rendering as a stray grey scrollable strip since it isn't covered by the mat-tab-group header rule already hidden). Also fixed both certificate print dialogs (share-certificate-dialog, deposit-certificate-dialog) reusing a `::ng-deep body > :not(.cdk-overlay- container)` rule to hide the shell during their own print: under Angular's style encapsulation this style is emitted fully unscoped into the global stylesheet and is never removed once the component has loaded once in a session, silently blanking every other page's print output for the rest of the session. Dropped `::ng-deep` from that one selector so it goes back to being properly scoped (and therefore inert, matching the other two dialogs that never had this bug) — the app shell is already hidden for every print via the global main.scss rules, so no dialog needs its own global override.
This commit is contained in:
+6
-10
@@ -576,13 +576,11 @@
|
||||
}
|
||||
|
||||
/* ───────── Print — only the page, no toolbar / dialog chrome ─────────
|
||||
This dialog is opened with `maxHeight: '92vh'`, which Angular Material carries onto the
|
||||
overlay pane / .mat-mdc-dialog-container as an inline max-height + overflow:auto clip.
|
||||
`position: absolute` still lives inside that clip and gets cut off — only the on-screen
|
||||
scroll position prints. `position: fixed` escapes it: a fixed element's containing block is
|
||||
the viewport itself, not the clipped ancestor (the classic "fixed child ignores an
|
||||
overflow:hidden parent" behaviour), as long as nothing between here and the viewport sets a
|
||||
transform/filter — the CDK overlay chrome doesn't. */
|
||||
The document-level clip (`html, body { overflow: hidden }`) is lifted globally in main.scss's
|
||||
print block; what remains here is this dialog's own clip — it opens with `maxHeight: '92vh'`,
|
||||
which Angular Material carries onto the overlay pane / .mat-mdc-dialog-container as an inline
|
||||
max-height plus overflow:auto. Freeing those lets the whole certificate flow onto the page in
|
||||
normal static order (a fixed/absolute hack would pin it to the first page instead). */
|
||||
@media print {
|
||||
body > :not(.cdk-overlay-container) {
|
||||
display: none !important;
|
||||
@@ -611,9 +609,7 @@
|
||||
}
|
||||
|
||||
.cpd-root {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: static;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
background: #fff;
|
||||
|
||||
Reference in New Issue
Block a user