fix overscrolling issue with popup

interface/src/App.tsx

@@ -38,7 +38,7 @@ const App: React.FC = () => {
   ];
 
   return (
-    <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } h-[610px] dark:bg-zinc-800 dark:text-white`}>
+    <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } h-[600px] overflow-clip dark:bg-zinc-800 dark:text-white`}>
       <div className="grid border-b border-b-zinc-200/40 place-items-center">
         <img src={logo} className="w-4/5 dark:hidden" />
         <img src={logoDark} className="hidden w-4/5 dark:block" />

interface/src/components/TabbedContainer.tsx

@@ -79,7 +79,7 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
                 activeTab === index && (
                   <motion.div
                     key={index}
-                    className="absolute w-full pb-6"
+                    className="absolute w-full pb-4"
                     initial="hidden"
                     animate="visible"
                     exit="hidden"

interface/src/index.css

@@ -10,4 +10,8 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+}
+
+::-webkit-scrollbar {
+  display: none;
 }

src/SEQTA.js

@@ -637,35 +637,11 @@ function main(storedSetting) {
   }
   if (storedSetting.onoff) {
     console.log("[BetterSEQTA+] Enabled");
-    // Injecting CSS File to the webpage to overwrite SEQTA's default CSS
-    var cssFile = chrome.runtime.getURL("inject/injected.css");
-    var fileref = document.createElement("link");
-    fileref.setAttribute("rel", "stylesheet");
-    fileref.setAttribute("type", "text/css");
-    fileref.setAttribute("href", cssFile);
-    document.head.appendChild(fileref);
-    document.getElementsByTagName("html")[0].appendChild(fileref);
-
-    // Injecting custom icons font file
-    const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
-
-    const style = document.createElement("style");
-    style.setAttribute("type", "text/css");
-    style.innerHTML = `
-    @font-face {
-      font-family: 'IconFamily';
-      src: url('${fontURL}') format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }`;
-    document.head.appendChild(style);
-
+    InjectStyles();
+    InjectCustomIcons();
     updateAllColors(storedSetting);
-
     ApplyCSSToHiddenMenuItems();
-
     loading();
-
     CheckLoadOnPeriods();
 
     if (!isChrome || isChrome == "undefined") {
@@ -689,6 +665,31 @@ function main(storedSetting) {
   }
 }
 
+function InjectStyles() {
+  var cssFile = chrome.runtime.getURL("inject/injected.css");
+  var fileref = document.createElement("link");
+  fileref.setAttribute("rel", "stylesheet");
+  fileref.setAttribute("type", "text/css");
+  fileref.setAttribute("href", cssFile);
+  document.head.appendChild(fileref);
+  document.getElementsByTagName("html")[0].appendChild(fileref);
+}
+
+function InjectCustomIcons() {
+  const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
+
+  const style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.innerHTML = `
+    @font-face {
+      font-family: 'IconFamily';
+      src: url('${fontURL}') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }`;
+  document.head.appendChild(style);
+}
+
 export function AppendElementsToDisabledPage() {
   AddBetterSEQTAElements(false);
 
@@ -790,7 +791,7 @@ function addExtensionSettings() {
   iframe.src = chrome.runtime.getURL("interface/index.html");
   iframe.allowTransparency = "true";
   iframe.style.width = "384px";
-  iframe.style.height = "610px";
+  iframe.style.height = "600px";
   iframe.style.border = "none";
   iframe.setAttribute("excludeDarkCheck", "true");