Merge pull request #501 from movie-web/jip-fixes

Jip fixes

src/assets/locales/pirate.json

@@ -179,7 +179,7 @@
         "disclaimer": "Downloads be taken directly from the provider. movie-web does not have control over how the downloads be provided.",
         "hlsExplanation": "Insert explanation for why ye can't download HLS here",
         "downloadVideo": "Download film",
-        "downloadCaption": "Download current sea shanty",
+        "downloadCaption": "Download sea shanty",
         "onPc": {
           "1": "On PC, right click the film and select <bold>Save film as</bold>",
           "title": "Downloadin' on PC",

src/components/overlays/OverlayPage.tsx

@@ -47,7 +47,7 @@ export function OverlayPage(props: Props) {
       show={show}
     >
       <div
-        className={classNames([props.className, ""])}
+        className={classNames(["grid grid-rows-1 max-h-full", props.className])}
         style={{
           height: props.height ? `${props.height}px` : undefined,
           width: props.width ? width : undefined,

src/components/overlays/OverlayRouter.tsx

@@ -75,7 +75,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
     <a.div
       ref={ref}
       style={dimensions}
-      className="overflow-hidden relative z-10"
+      className="overflow-hidden relative z-10 max-h-full"
     >
       <Flare.Base className="group w-full bg-video-context-border h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
         <Flare.Light
@@ -84,7 +84,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
           backgroundClass="bg-video-context-background duration-100"
           className="rounded-2xl opacity-100"
         />
-        <Flare.Child className="pointer-events-auto relative transition-transform duration-100">
+        <Flare.Child className="pointer-events-auto relative transition-transform duration-100 h-full">
           {props.children}
         </Flare.Child>
       </Flare.Base>

src/components/player/atoms/settings/CaptionsView.tsx

@@ -36,7 +36,7 @@ export function CaptionOption(props: {
         data-active-link={props.selected ? true : undefined}
         className="flex items-center"
       >
-        <span data-code={props.countryCode} className="mr-3">
+        <span data-code={props.countryCode} className="mr-3 inline-flex">
           <FlagIcon countryCode={props.countryCode} />
         </span>
         <span>{props.children}</span>