Dmitry VerkhoturovandGitHub
198efddb54
* fix(frontend): no_footer scrollbar regression introduced in v1.16.0
Two unrelated changes in v1.16.0 combined to surface a scrollbar in
no_footer=true mode:
1. c26f45e5 removed the deprecated `scrolling="no"` iframe attribute
on the grounds that "overflow is already hidden via CSS". That CSS
(`overflow: hidden` in createIframe styles) is on the iframe ELEMENT
in the parent page; it has no effect on the iframe DOCUMENT's own
scrollbars. The spec-correct replacement is `overflow: hidden` on
the iframe document's body — added here to global.css.
2. The negative `margin-bottom: -24px` on `.thread:last-child` was a
trick to tighten the gap to the footer (combined with the footer's
`margin-top: 48px` it collapsed to a 24px net gap). With no_footer
the negative margin had no positive-margin sibling to collapse
against and instead propagated up through .root, leaving body
~24px shorter than the visual content. The iframe height calc
(`body.offsetHeight + 12`) then sized the iframe below the visible
bottom of the last thread → scrollbar.
Replace the negative-margin trick with a straight `margin-top: 24px`
on `.copyright`. Same 24px visual gap when the footer is shown, no
propagation when it isn't. The mix={styles.thread} on Thread becomes
a dead reference and is dropped.
Closes #2073
* fix(frontend): drop dead Thread.mix prop after root.tsx removed its only caller
Both Copilot and umputun flagged this in PR review: after the parent
commit on this branch dropped `mix={styles.thread}` from root.tsx, the
`mix?: string` prop and the corresponding entry in the clsx() call in
thread.tsx are dead code — no caller passes it (the recursive Thread
render in thread.tsx:82 never did either). Remove the prop, the
destructure, and the clsx entry.
96 lines
1.2 KiB
CSS
96 lines
1.2 KiB
CSS
.root {
|
|
position: relative;
|
|
|
|
&::selection {
|
|
background: var(--color42);
|
|
}
|
|
}
|
|
|
|
.input {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.pinnedComment {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.pinnedComments {
|
|
margin-top: 20px;
|
|
padding: 0 12px 12px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.preloader {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.threads {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.copyright {
|
|
margin: 24px 0 0;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
}
|
|
|
|
.sortPicker {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 24px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.moreComments {
|
|
display: block;
|
|
max-width: 320px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.themeDark {
|
|
color: var(--color20);
|
|
|
|
& .copyright {
|
|
color: var(--color1);
|
|
}
|
|
|
|
& .copyrightLink {
|
|
color: var(--color1);
|
|
}
|
|
|
|
& .pinnedComment {
|
|
border-bottom-color: var(--color18);
|
|
}
|
|
|
|
& .pinnedComments {
|
|
background: var(--color19);
|
|
}
|
|
}
|
|
|
|
.themeLight {
|
|
color: var(--color0);
|
|
|
|
& .copyright {
|
|
color: var(--color1);
|
|
}
|
|
|
|
& .copyrightLink {
|
|
color: var(--color1);
|
|
}
|
|
|
|
& .pinnedComment {
|
|
border-bottom-color: var(--color3);
|
|
}
|
|
|
|
& .pinnedComments {
|
|
background: var(--color4);
|
|
}
|
|
}
|