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

@@ -10,7 +10,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ title }) => {
       <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">
+      <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-0 transform translate-y-8 w-max opacity-0 transition-opacity group-hover:opacity-100">
         {title}
       </span>
     </div>

frontend/dashboard/app/components/filters.tsx

@@ -9,7 +9,6 @@ import DropdownSelect, { DropdownSelectType } from "./dropdown_select";
 import FilterPill from "./filter_pill";
 import CreateApp from "./create_app";
 import DebounceTextInput from "./debounce_text_input";
-import LoadingSpinner from "./loading_spinner";
 
 export enum AppVersionsInitialSelectionType {
   Latest,