Fix UI issues when text is long

Fixes #914

public/content.css

@@ -140,7 +140,6 @@
 	min-width: 350px;
 	max-width: 50%;
 
-	border-radius: 5px;
 	border-spacing: 5px 10px;
 	padding-left: 5px;
 	padding-right: 5px;
@@ -148,9 +147,14 @@
 	border-collapse: unset;
 }
 
-.sponsorSkipNotice {
-	min-width: 350px;
+.sponsorSkipNoticeTableContainer {
 	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;
 }
@@ -311,7 +315,6 @@
 .sponsorTimesInfoMessage {
 	font-size: 13.3333px;
     color: rgb(235, 235, 235);
-	text-align: center;
 }
 
 .voteButton {

src/components/NoticeComponent.tsx

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