Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-07 12:07:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI issues when text is long

Browse Source 
Fixes #914
This commit is contained in:
Ajay Ramachandran
2021-09-02 00:05:13 -04:00
parent 3774ef9756
commit 0fc9e9b2fb
3 changed files with 61 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/content.css
View File

@@ -140,7 +140,6 @@
min-width: 350px; min-width: 350px;
max-width: 50%; max-width: 50%;
border-radius: 5px;
border-spacing: 5px 10px; border-spacing: 5px 10px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
@@ -148,9 +147,14 @@
border-collapse: unset; border-collapse: unset;
} }
.sponsorSkipNotice { .sponsorSkipNoticeTableContainer {
min-width: 350px;
background-color: rgba(28, 28, 28, 0.9); background-color: rgba(28, 28, 28, 0.9);
border-radius: 5px;
min-width: 100%;
}
.sponsorSkipNotice {
min-width: calc(100% - 50px);
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
} }
@@ -311,7 +315,6 @@
.sponsorTimesInfoMessage { .sponsorTimesInfoMessage {
font-size: 13.3333px; font-size: 13.3333px;
color: rgb(235, 235, 235); color: rgb(235, 235, 235);
text-align: center;
} }
.voteButton { .voteButton {

6
src/components/NoticeComponent.tsx
View File

@@ -102,9 +102,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
onMouseEnter={(e) => this.onMouseEnter(e) } onMouseEnter={(e) => this.onMouseEnter(e) }
onMouseLeave={() => this.timerMouseLeave()} onMouseLeave={() => this.timerMouseLeave()}
style={noticeStyle} > style={noticeStyle} >
<table className={"sponsorSkipObject sponsorSkipNotice" <div className={"sponsorSkipNoticeTableContainer"
+ (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "") + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") } > + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
<table className="sponsorSkipObject sponsorSkipNotice">
<tbody> <tbody>
{/* First row */} {/* First row */}
@@ -161,6 +162,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
</tbody> </tbody>
</table> </table>
</div>
{/* Add as a hidden table to keep the height constant */} {/* Add as a hidden table to keep the height constant */}
{this.props.smaller && this.props.bottomRow ? {this.props.smaller && this.props.bottomRow ?