From 0fc9e9b2fba632d5b6e1edd5bd9e284ef58a1ad5 Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Thu, 2 Sep 2021 00:05:13 -0400
Subject: [PATCH] Fix UI issues when text is long

Fixes #914
---
 public/content.css                     |  11 ++-
 src/components/NoticeComponent.tsx     | 104 +++++++++++++------------
 src/components/SkipNoticeComponent.tsx |   2 +-
 3 files changed, 61 insertions(+), 56 deletions(-)

diff --git a/public/content.css b/public/content.css
index b2e4b1e5..a35664da 100644
--- a/public/content.css
+++ b/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 {
diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index 4c088258..68c01d05 100644
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -102,65 +102,67 @@ 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" : "") } >
-                    <tbody>
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
+                    <table className="sponsorSkipObject sponsorSkipNotice">
+                        <tbody>
 
-                        {/* First row */}
-                        <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
-                            {/* Left column */}
-                            <td className="noticeLeftIcon">
-                                {/* Logo */}
-                                <img id={"sponsorSkipLogo" + this.idSuffix} 
-                                    className="sponsorSkipLogo sponsorSkipObject"
-                                    src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
-                                </img>
-
-                                <span id={"sponsorSkipMessage" + this.idSuffix}
-                                    style={{float: "left"}}
-                                    className="sponsorSkipMessage sponsorSkipObject">
-                                    
-                                    {this.state.noticeTitle}
-                                </span>
-
-                                {this.props.firstColumn}
-                            </td>
-
-                            {this.props.firstRow}
-
-                            {/* Right column */}
-                            <td className="sponsorSkipNoticeRightSection"
-                                style={{top: "9.32px"}}>
-                                
-                                {/* Time left */}
-                                {this.props.timed ? ( 
-                                    <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
-                                        onClick={() => this.toggleManualPause()}
-                                        className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
-
-                                        {this.getCountdownElements()}
+                            {/* First row */}
+                            <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
+                                {/* Left column */}
+                                <td className="noticeLeftIcon">
+                                    {/* Logo */}
+                                    <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                        className="sponsorSkipLogo sponsorSkipObject"
+                                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                    </img>
 
+                                    <span id={"sponsorSkipMessage" + this.idSuffix}
+                                        style={{float: "left"}}
+                                        className="sponsorSkipMessage sponsorSkipObject">
+                                        
+                                        {this.state.noticeTitle}
                                     </span>
-                                ) : ""}
-                            
 
-                                {/* Close button */}
-                                <img src={chrome.extension.getURL("icons/close.png")}
-                                    className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
-                                    onClick={() => this.close()}>
-                                </img>
-                            </td>
-                        </tr> 
+                                    {this.props.firstColumn}
+                                </td>
 
-                        {this.props.children}
+                                {this.props.firstRow}
 
-                        {!this.props.smaller && this.props.bottomRow ? 
-                            this.props.bottomRow
-                        : null}
+                                {/* Right column */}
+                                <td className="sponsorSkipNoticeRightSection"
+                                    style={{top: "9.32px"}}>
+                                    
+                                    {/* Time left */}
+                                    {this.props.timed ? ( 
+                                        <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
+                                            onClick={() => this.toggleManualPause()}
+                                            className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
 
-                    </tbody> 
-                </table>
+                                            {this.getCountdownElements()}
+
+                                        </span>
+                                    ) : ""}
+                                
+
+                                    {/* Close button */}
+                                    <img src={chrome.extension.getURL("icons/close.png")}
+                                        className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
+                                        onClick={() => this.close()}>
+                                    </img>
+                                </td>
+                            </tr> 
+
+                            {this.props.children}
+
+                            {!this.props.smaller && this.props.bottomRow ? 
+                                this.props.bottomRow
+                            : null}
+
+                        </tbody> 
+                    </table>
+                </div>
 
                 {/* Add as a hidden table to keep the height constant */}
                 {this.props.smaller && this.props.bottomRow ? 
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index 0af1efad..bacb2b84 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -82,7 +82,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.audio = null;
 
         const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
-    
+
         const previousSkipNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
         this.amountOfPreviousNotices = previousSkipNotices.length;
         // If there is at least one already in the first slot