From 7b88e89103b0fbf532ee85baf812ef4fa21e55d2 Mon Sep 17 00:00:00 2001
From: Aaron shiel <57824522+aaronshiel@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:48:01 -0700
Subject: [PATCH] title fix (#235)

* title fix

* spinner center

* test fix
---
 client/src/components/header.tsx      | 18 ++++++++++++------
 client/src/components/video-panel.tsx |  2 +-
 client/src/styles/layout.css          | 15 ++++++++++++---
 client/src/use-with-window-size.tsx   |  4 +++-
 cypress/cypress/e2e/panel.cy.ts       |  4 ++--
 5 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
index b5f839c7..4ce5c81e 100644
--- a/client/src/components/header.tsx
+++ b/client/src/components/header.tsx
@@ -6,7 +6,7 @@ The full terms of this copyright and license should always be found in the root
 */
 import React from "react";
 import { useSelector } from "react-redux";
-import { Typography } from "@mui/material";
+import { Tooltip, Typography } from "@mui/material";
 import { State } from "types";
 import IconButton from "@mui/material/IconButton";
 import HomeIcon from "@mui/icons-material/Home";
@@ -20,6 +20,7 @@ import {
   REGISTRATION_ID_KEY,
   SESSION_URL_PARAM_KEY,
 } from "local-constants";
+import { useWithWindowSize } from "use-with-window-size";
 
 interface HeaderMentorData {
   _id: string;
@@ -42,7 +43,7 @@ function Header(): JSX.Element {
       title: m.mentor.title,
     };
   });
-
+  const { isMobile } = useWithWindowSize();
   const styleHeaderLogo = useSelector<State, string>(
     (state) => state.config.styleHeaderLogo?.trim() || ""
   );
@@ -79,7 +80,10 @@ function Header(): JSX.Element {
   };
 
   const MentorNameTitle = `${mentor.name}: ${mentor.title}`;
-
+  const mentorTitleTooLong = isMobile && MentorNameTitle.length > 80;
+  const displayMentorNameTitle = mentorTitleTooLong
+    ? MentorNameTitle.slice(0, 80).concat("...")
+    : MentorNameTitle;
   return (
     <div
       data-cy="header"
@@ -138,9 +142,11 @@ function Header(): JSX.Element {
           )}
         </div>
       </div>
-      <div className="header-mentor-info">
-        <Typography>{MentorNameTitle}</Typography>
-      </div>
+      <Tooltip title={mentorTitleTooLong ? MentorNameTitle : ""}>
+        <div className="header-mentor-info">
+          <Typography>{displayMentorNameTitle}</Typography>
+        </div>
+      </Tooltip>
       <div>
         <Disclaimer />
       </div>
diff --git a/client/src/components/video-panel.tsx b/client/src/components/video-panel.tsx
index cca48eeb..598c6fe7 100644
--- a/client/src/components/video-panel.tsx
+++ b/client/src/components/video-panel.tsx
@@ -78,6 +78,7 @@ function VideoPanel(): JSX.Element {
               key={`${id}-${i}`}
               style={{ display: "inline-block", position: "relative" }}
             >
+              <LoadingSpinner mentor={id} />
               <div
                 style={{ position: "absolute", right: 0, top: 5, zIndex: 2 }}
               >
@@ -102,7 +103,6 @@ function VideoPanel(): JSX.Element {
                 onClick={() => onClick(id)}
               >
                 <VideoThumbnail mentor={id} />
-                <LoadingSpinner mentor={id} />
                 <MessageStatus mentor={id} />
               </button>
             </div>
diff --git a/client/src/styles/layout.css b/client/src/styles/layout.css
index e88e27c9..835bfc4e 100644
--- a/client/src/styles/layout.css
+++ b/client/src/styles/layout.css
@@ -102,9 +102,9 @@ body {
 
 .spinner {
   position: absolute;
-  left: 50%;
-  bottom: 15px;
-  transform: translateX(-50%);
+  top: 25%;
+  left: 25%;
+  transform: translate(-50%, -50%);
 }
 
 .message-notice {
@@ -287,6 +287,7 @@ body {
 .header-mentor-info > p {
   font-size: 1.2rem !important;
 }
+
 /* width */
 ::-webkit-scrollbar {
   width: 15px;
@@ -343,3 +344,11 @@ textarea:-moz-placeholder {
   background-color: #fff !important;
   border-radius: 0px;
 }
+
+@media only screen and (max-width: 800px) {
+  .header-mentor-info > p {
+    font-weight: bold;
+    font-size: 0.8rem !important;
+    line-height: 1rem !important;
+  }
+}
diff --git a/client/src/use-with-window-size.tsx b/client/src/use-with-window-size.tsx
index 1b74fa22..e390737a 100644
--- a/client/src/use-with-window-size.tsx
+++ b/client/src/use-with-window-size.tsx
@@ -9,11 +9,12 @@ import { useEffect, useState } from "react";
 interface WindowSize {
   width: number;
   height: number;
+  isMobile: boolean;
 }
 
 export function useWithWindowSize(): WindowSize {
   const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
-
+  const isMobile = windowSize.width < 768;
   useEffect(() => {
     if (typeof window === "undefined") {
       return;
@@ -30,5 +31,6 @@ export function useWithWindowSize(): WindowSize {
   return {
     width: windowSize.width,
     height: windowSize.height,
+    isMobile,
   };
 }
diff --git a/cypress/cypress/e2e/panel.cy.ts b/cypress/cypress/e2e/panel.cy.ts
index 498d09b4..7e85aa41 100644
--- a/cypress/cypress/e2e/panel.cy.ts
+++ b/cypress/cypress/e2e/panel.cy.ts
@@ -65,10 +65,10 @@ describe("Mentor panel", () => {
     cy.get("[data-cy=input-send]").trigger("mouseover").click();
     cy.wait("@carlos-query");
     // Despite recieving a response to carlos, we are still waiting for all responses before continuing
-    cy.get("[data-cy=video-thumbnail-carlos]").within(($within) => {
+    cy.get("[data-cy=video-thumbnail-container-carlos]").within(($within) => {
       cy.get("[data-cy=loading-answer-spinner]").should("exist");
     });
-    cy.get("[data-cy=video-thumbnail-clint]").within(($within) => {
+    cy.get("[data-cy=video-thumbnail-container-clint]").within(($within) => {
       cy.get("[data-cy=loading-answer-spinner]").should("exist");
     });
   });