From f4e3218e7b27827ea914ab2f7510d8a6ca1ff501 Mon Sep 17 00:00:00 2001
From: Onyx2406 <yashsancheti24@gmail.com>
Date: Fri, 3 Apr 2026 04:53:52 +0000
Subject: [PATCH] fix: prevent popup scrollbar when browser zoom exceeds 100%

When browser zoom is above 100%, the popup's fixed 600px height
exceeds the available viewport, causing an unwanted scrollbar.

Add `max-h-screen` to cap the popup container at the actual
viewport height regardless of zoom level, and `overflow-hidden`
to prevent the outer scrollbar. The main content area gets
`overflow-y-auto` so content remains accessible when it exceeds
the available space.

Closes #1014
---
 src/pages/popup/components/layout/MainLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/popup/components/layout/MainLayout.tsx b/src/pages/popup/components/layout/MainLayout.tsx
index cae10685..ebd78684 100644
--- a/src/pages/popup/components/layout/MainLayout.tsx
+++ b/src/pages/popup/components/layout/MainLayout.tsx
@@ -8,12 +8,12 @@ const Divider = () => {
 export const MainLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
-      className="flex h-popup w-popup touch:w-full touch:h-screen flex-col gap-4 px-6 touch:px-4 py-4 @container"
+      className="flex h-popup max-h-screen w-popup touch:w-full touch:h-screen flex-col gap-4 px-6 touch:px-4 py-4 overflow-hidden @container"
       id="main"
     >
       <Header />
       <Divider />
-      <main className="flex flex-1 flex-col">{children}</main>
+      <main className="flex flex-1 flex-col overflow-y-auto">{children}</main>
     </div>
   );
 };