diff --git a/ui/v2.5/src/components/Changelog/versions/v0100.md b/ui/v2.5/src/components/Changelog/versions/v0100.md index e12f3caf8..cd6b2aa1b 100644 --- a/ui/v2.5/src/components/Changelog/versions/v0100.md +++ b/ui/v2.5/src/components/Changelog/versions/v0100.md @@ -14,6 +14,7 @@ * Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691)) ### 🐛 Bug fixes +* Fix Scene Player CLS issue ([#1739](https://github.com/stashapp/stash/pull/1739)) * Fix Scene Edit Panel form layout for mobile and desktop. ([#1737](https://github.com/stashapp/stash/pull/1737)) * Fix Gallery create plugin hook not being invoked when creating Gallery from folder. ([#1731](https://github.com/stashapp/stash/pull/1731)) * Fix tag aliases not being matched when autotagging from the tasks page. ([#1713](https://github.com/stashapp/stash/pull/1713)) diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx index c21cb3484..3a9ee024e 100644 --- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx +++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx @@ -349,6 +349,7 @@ export class ScenePlayerImpl extends React.Component< onSeeked={this.onSeeked} onTime={this.onTime} onOneHundredPercent={() => this.onComplete()} + className="video-wrapper" /> div:first-child { - /* minus the scrubber height and margin */ - height: calc(100% - #{$scrubberHeight} - 15px); - } -} + .video-wrapper { + height: 56.25vw; -/* scrubber is hidden when height < 450px or width < 576, so use entire height for scene player */ -@media (max-height: 449px), (max-width: 575px) { - #jwplayer-container > div:first-child { - height: 100%; + @media (min-width: 1200px) { + height: 100%; + } + } + + &.portrait .video-wrapper { + height: 177.78vw; } } @@ -57,9 +45,6 @@ $scrubberHeight: 120px; padding-right: 15px; } } - -$sceneTabWidth: 450px; - @media (min-width: 1200px) { .scene-tabs { flex: 0 0 $sceneTabWidth; @@ -117,6 +102,7 @@ $sceneTabWidth: 450px; } .scrubber-wrapper { + flex-shrink: 0; margin: 5px 0; overflow: hidden; position: relative;