implement comment fixes

src/components/layout/BrandPill.tsx

@@ -17,9 +17,10 @@ export function BrandPill(props: {
     >
       <Icon className="text-xl" icon={Icons.MOVIE_WEB} />
       <span
-        className={`font-semibold text-white ${
-          props.hideTextOnMobile ? "hidden sm:block" : ""
-        }`}
+        className={[
+          "font-semibold text-white",
+          props.hideTextOnMobile ? "hidden sm:block" : "",
+        ].join(" ")}
       >
         {t("global.name")}
       </span>

src/components/layout/SectionHeading.tsx

@@ -10,7 +10,7 @@ interface SectionHeadingProps {
 
 export function SectionHeading(props: SectionHeadingProps) {
   return (
-    <div className={`${props.className}`}>
+    <div className={props.className}>
       <div className="mb-5 flex items-center">
         <p className="flex flex-1 items-center font-bold uppercase text-denim-700">
           {props.icon ? (

src/components/media/MediaCard.tsx

@@ -45,23 +45,26 @@ function MediaCardContent({
         }`}
       >
         <div
-          className={`relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 ${
-            closable ? "" : "group-hover:rounded-lg"
-          }`}
+          className={[
+            "relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100",
+            closable ? "" : "group-hover:rounded-lg",
+          ].join(" ")}
           style={{
             backgroundImage: media.poster ? `url(${media.poster})` : undefined,
           }}
         >
           {series ? (
             <div
-              className={`absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors ${
-                closable ? "" : "group-hover:bg-denim-500"
-              }`}
+              className={[
+                "absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors",
+                closable ? "" : "group-hover:bg-denim-500",
+              ].join(" ")}
             >
               <p
-                className={`text-center text-xs font-bold text-slate-400 transition-colors ${
-                  closable ? "" : "group-hover:text-white"
-                }`}
+                className={[
+                  "text-center text-xs font-bold text-slate-400 transition-colors",
+                  closable ? "" : "group-hover:text-white",
+                ].join(" ")}
               >
                 {t("seasons.seasonAndEpisode", {
                   season: series.season,

src/setup/locales/en/translation.json

@@ -54,7 +54,8 @@
     "findingBestVideo": "Finding the best video for you",
     "noVideos": "Whoops, couldn't find any videos for you",
     "loading": "Loading...",
-    "backToHome": "Back",
+    "backToHome": "Back to home",
+    "backToHomeShort": "Back",
     "seasonAndEpisode": "S{{season}} E{{episode}}",
     "buttons": {
       "episodes": "Episodes",

src/video/components/VideoPlayer.tsx

@@ -138,8 +138,8 @@ export function VideoPlayer(props: Props) {
                 </div>
                 <div className="flex items-center">
                   {isMobile ? (
-                    <div className="flex w-full grid-cols-[56px,1fr,56px] items-center justify-between sm:grid">
-                      <div className="hidden sm:block" />
+                    <div className="grid w-full grid-cols-[56px,1fr,56px] items-center">
+                      <div />
                       <div className="flex items-center justify-center">
                         <CaptionsSelectionAction />
                         <SeriesSelectionAction />

src/video/components/parts/VideoPlayerHeader.tsx

@@ -9,6 +9,7 @@ import {
 import { AirplayAction } from "@/video/components/actions/AirplayAction";
 import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
 import { useTranslation } from "react-i18next";
+import { useIsMobile } from "@/hooks/useIsMobile";
 
 interface VideoPlayerHeaderProps {
   media?: MWMediaMeta;
@@ -17,6 +18,7 @@ interface VideoPlayerHeaderProps {
 }
 
 export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
+  const { isMobile } = useIsMobile();
   const { bookmarkStore, setItemBookmark } = useBookmarkContext();
   const isBookmarked = props.media
     ? getIfBookmarkedFromPortable(bookmarkStore.bookmarks, props.media)
@@ -34,7 +36,11 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
               className="flex cursor-pointer items-center py-1 text-white opacity-50 transition-opacity hover:opacity-100"
             >
               <Icon className="mr-2" icon={Icons.ARROW_LEFT} />
-              <span>{t("videoPlayer.backToHome")}</span>
+              {isMobile ? (
+                <span>{t("videoPlayer.backToHomeShort")}</span>
+              ) : (
+                <span>{t("videoPlayer.backToHome")}</span>
+              )}
             </span>
           ) : null}
           {showDivider ? (

src/video/components/popouts/PopoutProviderAction.tsx

@@ -60,9 +60,10 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
   return (
     <div
       ref={ref}
-      className={`absolute z-10 grid w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200 ${
-        isMobile ? "h-[230px]" : " h-[500px]"
-      }`}
+      className={[
+        "absolute z-10 grid w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200",
+        isMobile ? "h-[230px]" : " h-[500px]",
+      ].join(" ")}
       style={{
         right: `${right}px`,
         bottom: `${bottom}px`,

src/video/components/popouts/SourceSelectionPopout.tsx

@@ -169,8 +169,6 @@ export function SourceSelectionPopout() {
       return entries;
     });
 
-    console.log(embedsRes);
-
     return embedsRes;
   }, [scrapeResult?.embeds]);