fix(frontend): fix nav aside scroll on detail content exceeding scree…

…n area

fixes #1360

frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap

@@ -14,7 +14,7 @@ exports[`FilterPill renders correctly 1`] = `
           TITLE
         </p>
         <span
-          class="pointer-events-none z-50 max-w-xl absolute font-sans text-xs text-white rounded-md p-4 bg-neutral-800 left-0 -top-2 transform translate-y-full w-max opacity-0 transition-opacity group-hover:opacity-100"
+          class="pointer-events-none z-50 max-w-xl absolute font-sans text-xs text-white rounded-md p-4 bg-neutral-800 left-0 top-0 transform translate-y-8 w-max opacity-0 transition-opacity group-hover:opacity-100"
         >
           TITLE
         </span>
@@ -31,7 +31,7 @@ exports[`FilterPill renders correctly 1`] = `
         TITLE
       </p>
       <span
-        class="pointer-events-none z-50 max-w-xl absolute font-sans text-xs text-white rounded-md p-4 bg-neutral-800 left-0 -top-2 transform translate-y-full w-max opacity-0 transition-opacity group-hover:opacity-100"
+        class="pointer-events-none z-50 max-w-xl absolute font-sans text-xs text-white rounded-md p-4 bg-neutral-800 left-0 top-0 transform translate-y-8 w-max opacity-0 transition-opacity group-hover:opacity-100"
       >
         TITLE
       </span>

frontend/dashboard/app/[teamId]/layout.tsx

@@ -119,7 +119,7 @@ export default function DashboardLayout({
             <button className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display transition-colors duration-100 py-2 px-4" onClick={() => logoutUser()}>Logout</button>
           </nav>
         </aside>
-        {teamsApiStatus === TeamsApiStatus.Success && <main>{children}</main>}
+        {teamsApiStatus === TeamsApiStatus.Success && <main className="md:overflow-auto">{children}</main>}
       </div>
     </div>
   );

frontend/dashboard/app/components/filter_pill.tsx

@@ -4,14 +4,16 @@ interface FilterPillProps {
   title: string,
 }
 
+const tooltipChars = 1000
+
 const FilterPill: React.FC<FilterPillProps> = ({ title }) => {
   return (
     <div className="group relative select-none">
       <p className="px-2 py-1 max-w-72 whitespace-nowrap text-ellipsis overflow-hidden text-white bg-neutral-950 font-display text-sm border border-black rounded-full outline-none transition ease-in-out transition-colors duration-100">
         {title}
       </p>
-      <span className="pointer-events-none z-50 max-w-xl absolute font-sans text-xs text-white rounded-md p-4 bg-neutral-800 left-0 -top-2 transform translate-y-full w-max opacity-0 transition-opacity group-hover:opacity-100">
-        {title}
+      <span className="pointer-events-none z-50 absolute max-w-xl w-max font-sans text-xs text-white rounded-md p-4 bg-neutral-800 left-0 top-0 transform translate-y-8 opacity-0 transition-opacity group-hover:opacity-100">
+        {title.length <= tooltipChars ? title : title.slice(0, tooltipChars) + "..."}
       </span>
     </div>
   );