Use useIsMobile to only show the text on large displays

src/components/layout/BrandPill.tsx

@@ -2,13 +2,14 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
+import { useIsMobile } from "@/hooks/useIsMobile";
 
 export function BrandPill(props: {
   clickable?: boolean;
-  // hideTextOnMobile?: boolean;
   backgroundClass?: string;
 }) {
   const { t } = useTranslation();
+  const isMobile = useIsMobile();
 
   return (
     <div
@@ -21,6 +22,14 @@ export function BrandPill(props: {
       )}
     >
       <Icon className="text-2xl" icon={Icons.MOVIE_WEB} />
+      <span
+        className={[
+          "font-semibold text-white",
+          isMobile ? "hidden sm:block" : "",
+        ].join(" ")}
+      >
+        {t("global.name")}
+      </span>
     </div>
   );
 }