Move back arrow for episode selector

src/components/player/atoms/Episodes.tsx

@@ -407,18 +407,9 @@ function EpisodesView({
 
   return (
     <Menu.CardWithScrollable>
-      <Menu.BackLink
-        onClick={goBack}
-        rightSide={
-          <div className="text-right">
-            <div>
-              {loadingState?.value?.season.title ||
-                t("player.menus.episodes.loadingTitle")}
-            </div>
-          </div>
-        }
-      >
-        {t("player.menus.episodes.seasons")}
+      <Menu.BackLink onClick={goBack} side="right">
+        {loadingState?.value?.season.title ||
+          t("player.menus.episodes.loadingTitle")}
       </Menu.BackLink>
       {content}
     </Menu.CardWithScrollable>

src/components/player/internals/ContextMenu/Links.tsx

@@ -34,7 +34,29 @@ export function BackLink(props: {
   onClick?: () => void;
   children: React.ReactNode;
   rightSide?: React.ReactNode;
+  side?: "left" | "right";
 }) {
+  const { side = "left" } = props;
+
+  if (side === "right") {
+    return (
+      <Title
+        rightSide={
+          <button
+            type="button"
+            className="p-2 rounded tabbable hover:bg-video-context-light hover:bg-opacity-10"
+            onClick={props.onClick}
+          >
+            <Icon className="text-xl" icon={Icons.ARROW_RIGHT} />
+          </button>
+        }
+      >
+        <button type="button" onClick={props.onClick}>
+          <span className="line-clamp-1 break-all">{props.children}</span>
+        </button>
+      </Title>
+    );
+  }
   return (
     <Title rightSide={props.rightSide}>
       <button