diff options
| author | Pinapelz <yukais@pinapelz.com> | 2024-11-17 13:50:18 -0800 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2024-11-17 14:27:57 -0800 |
| commit | c0a941be17066c35634bd252b84771dbb0fc025d (patch) | |
| tree | 2709aad71f273252a1e401bb990dd58fd926b4c8 | |
| parent | f9e5da58d2d224358c017bf297b01efd767de8e9 (diff) | |
fix scrolling issue
| -rw-r--r-- | src/app/components/LRCPlayer.tsx | 2 | ||||
| -rw-r--r-- | src/app/page.tsx | 41 |
2 files changed, 22 insertions, 21 deletions
diff --git a/src/app/components/LRCPlayer.tsx b/src/app/components/LRCPlayer.tsx index 92b9531..684a6b7 100644 --- a/src/app/components/LRCPlayer.tsx +++ b/src/app/components/LRCPlayer.tsx @@ -49,6 +49,8 @@ const lrcStyle: CSSProperties = { flex: 1, minHeight: 0, overflow: "hidden !important", + overflowY: "auto", + scrollBehavior: "smooth", }; interface LrcPlayerProps { diff --git a/src/app/page.tsx b/src/app/page.tsx index 4212ffa..4ea49f7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -82,17 +82,14 @@ const StyledLink = styled.a` } `; -const StyledButton = styled.button` - padding: 10px 15px; - margin-top: 10px; - border-radius: 5px; - border: 1px solid #ddd; - cursor: pointer; - &:hover, - &:focus { - background-color: #eaeaea; - outline: none; - } +const LRCPlayerWrapper = styled.div` + flex: 1; + display: flex; + flex-direction: column; + height: 100vh; + overflow-y: auto; + scroll-behavior: smooth; + background-color: #ffffff; `; function KaraokePage() { @@ -490,13 +487,15 @@ function KaraokePage() { <ToastContainer /> {/*LRC viewer*/} <div style={{ display: "flex", width: "100%", height: "100vh" }}> - <LRCPlayer - lrc={lrcContent} - currentMillisecond={currentMillisecond} - animate={animate} - lrcColor={lrcColor} - fontColor={fontColor} - /> + <LRCPlayerWrapper> + <LRCPlayer + lrc={lrcContent} + currentMillisecond={currentMillisecond} + animate={animate} + lrcColor={lrcColor} + fontColor={fontColor} + /> + </LRCPlayerWrapper> {/* Ternary operation for if videoUrl has been set */} <div @@ -627,7 +626,7 @@ function KaraokePage() { Demo{" "} </StyledLink> </p> - <div style={{ marginTop: "20px", width: "80%" }}> + <div> <label htmlFor="base64Input"> or enter a PatchworkKaraoke code: </label> @@ -640,9 +639,9 @@ function KaraokePage() { } style={{ width: "100%", fontSize: "16px" }} /> - <StyledButton onClick={handleKaraokeb64Code}> + <button onClick={handleKaraokeb64Code}> Load Data - </StyledButton> + </button> </div> </div> )} |