From 583f96d003e5191d7dd338c9844ca56f66d9b18a Mon Sep 17 00:00:00 2001
From: Anup Cowkur <anupcowkur89@gmail.com>
Date: Wed, 16 Oct 2024 16:37:47 +0530
Subject: [PATCH] fix(frontend): fix nav aside scroll on detail content
 exceeding screen area

fixes #1360
---
 .../components/__snapshots__/filter_pill_test.tsx.snap        | 4 ++--
 frontend/dashboard/app/[teamId]/layout.tsx                    | 2 +-
 frontend/dashboard/app/components/filter_pill.tsx             | 2 +-
 frontend/dashboard/app/components/filters.tsx                 | 1 -
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap
index 25e38fb8e..e6e568fc9 100644
--- a/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap
+++ b/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>
diff --git a/frontend/dashboard/app/[teamId]/layout.tsx b/frontend/dashboard/app/[teamId]/layout.tsx
index 0b26f703f..24019f5c5 100644
--- a/frontend/dashboard/app/[teamId]/layout.tsx
+++ b/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>
   );
diff --git a/frontend/dashboard/app/components/filter_pill.tsx b/frontend/dashboard/app/components/filter_pill.tsx
index 37b212563..51ccafa9f 100644
--- a/frontend/dashboard/app/components/filter_pill.tsx
+++ b/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>
diff --git a/frontend/dashboard/app/components/filters.tsx b/frontend/dashboard/app/components/filters.tsx
index e58eb3fdd..8abf6c448 100644
--- a/frontend/dashboard/app/components/filters.tsx
+++ b/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,