From 09f6f522de88423190231cc32b21135647328990 Mon Sep 17 00:00:00 2001
From: KOWX712 <leecc0503@gmail.com>
Date: Fri, 21 Feb 2025 02:29:42 +0800
Subject: [PATCH] opt: simplify ripple effect class

---
 module/webui/index.html                |  58 +++++++-------
 module/webui/scripts/language.js       |   2 +-
 module/webui/scripts/main.js           | 101 ++++++++++++-------------
 module/webui/styles/about.css          |   2 -
 module/webui/styles/applist.css        |   6 --
 module/webui/styles/boot_hash.css      |   2 -
 module/webui/styles/global.css         |   6 +-
 module/webui/styles/header.css         |   1 -
 module/webui/styles/search_menu.css    |   5 --
 module/webui/styles/security_patch.css |   2 -
 10 files changed, 83 insertions(+), 102 deletions(-)

diff --git a/module/webui/index.html b/module/webui/index.html
index d748d9c..a8762a0 100644
--- a/module/webui/index.html
+++ b/module/webui/index.html
@@ -51,12 +51,12 @@
 
     <!-- Floating Button Element -->
     <div class="floating-card">
-        <button class="floating-btn" id="save" data-i18n="functional_button.save_and_update_button"></button>
+        <button class="floating-btn ripple-element" id="save" data-i18n="functional_button.save_and_update_button"></button>
     </div>
 
     <!-- Menu Options -->
     <div class="search-menu-container">
-        <div class="search-card">
+        <div class="search-card ripple-element">
             <span class="search-icon">
                 <svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="24px" fill="#6E6E6E"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
             </span>
@@ -65,24 +65,24 @@
         </div>
         <div class="menu">
             <input type="checkbox" id="menu-toggle" class="menu-toggle">
-            <label for="menu-toggle" class="menu-button" id="menu-button">
+            <label for="menu-toggle" class="menu-button ripple-element" id="menu-button">
                 <i class="menu-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -1060 960 960" width="24px"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
                 </i>
             </label>
             <div id="menu-options" class="menu-options">
                 <ul>
-                    <li id="refresh" data-i18n="menu.refresh"></li>
-                    <li id="select-all" data-i18n="menu.select_all"></li>
-                    <li id="deselect-all" data-i18n="menu.deselect_all"></li>
-                    <li id="select-denylist" data-i18n="menu.select_denylist"></li>
-                    <li id="deselect-unnecessary" data-i18n="menu.deselect_unnecessary"></li>
-                    <li id="aospkb" data-i18n="menu.set_aosp_keybox"></li>
-                    <li id="validkb" data-i18n="menu.set_valid_keybox"></li>
-                    <li id="customkb" data-i18n="menu.set_custom_keybox"></li>
-                    <li id="boot-hash" data-i18n="menu.set_verified_boot_hash"></li>
-                    <li id="security-patch" data-i18n="menu.set_security_patch"></li>
-                    <li id="about" data-i18n="menu.about"></li>
+                    <li class="ripple-element" id="refresh" data-i18n="menu.refresh"></li>
+                    <li class="ripple-element" id="select-all" data-i18n="menu.select_all"></li>
+                    <li class="ripple-element" id="deselect-all" data-i18n="menu.deselect_all"></li>
+                    <li class="ripple-element" id="select-denylist" data-i18n="menu.select_denylist"></li>
+                    <li class="ripple-element" id="deselect-unnecessary" data-i18n="menu.deselect_unnecessary"></li>
+                    <li class="ripple-element" id="aospkb" data-i18n="menu.set_aosp_keybox"></li>
+                    <li class="ripple-element" id="validkb" data-i18n="menu.set_valid_keybox"></li>
+                    <li class="ripple-element" id="customkb" data-i18n="menu.set_custom_keybox"></li>
+                    <li class="ripple-element" id="boot-hash" data-i18n="menu.set_verified_boot_hash"></li>
+                    <li class="ripple-element" id="security-patch" data-i18n="menu.set_security_patch"></li>
+                    <li class="ripple-element" id="about" data-i18n="menu.about"></li>
                 </ul>
             </div>
         </div>
@@ -91,20 +91,20 @@
 
     <!-- Applist Display -->
     <div id="apps-list"></div>
-    <div class="update-card" id="update-card">
+    <div class="update-card ripple-element" id="update-card">
         <p id="update-available" data-i18n="update.update_available"></p>
         <p id="redirect-to-release" data-i18n="update.redirect_to_release"></p>
     </div>
     <div class="mode-overlay"></div>
     <template id="app-template">
         <div class="card-box">
-            <div class="card" id="card">
+            <div class="card ripple-element" id="card">
                 <div class="content" data-package="">
                     <div class="mode">
                         <label class="mode-switch" id="normal">
 					        <input type="radio" class="mode-input" id="normal-mode">
 					        <i class="mode-icon">
-					            <div class="status-indicator" id="normal-indicator">
+					            <div class="status-indicator ripple-element" id="normal-indicator">
 				                    <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#ffffff"><path d="M480-480Zm0 280q-116 0-198-82t-82-198q0-116 82-198t198-82q116 0 198 82t82 198q0 116-82 198t-198 82Zm0-80q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Z"/></svg>
 				                </div>
 				            </i>
@@ -112,7 +112,7 @@
 				        <label class="mode-switch" id="generate">
 					        <input type="radio" class="mode-input" id="generate-mode">
 					        <i class="mode-icon">
-					            <div class="status-indicator" id="generate-indicator">
+					            <div class="status-indicator ripple-element" id="generate-indicator">
 				                    <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#ffffff"><path d="M480-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm-80-240v-480h160v480H400Z"/></svg>
 				                </div>
 				            </i>
@@ -120,7 +120,7 @@
 				        <label class="mode-switch" id="hack">
 					        <input type="radio" class="mode-input" id="hack-mode">
 					        <i class="mode-icon">
-					            <div class="status-indicator" id="hack-indicator">
+					            <div class="status-indicator ripple-element" id="hack-indicator">
 				                    <svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="19px" fill="#ffffff"><path d="M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z"/></svg>
 				                </div>
 				            </i>
@@ -219,11 +219,11 @@
     <div id="boot-hash-overlay" class="boot-hash-overlay"></div>
     <div id="boot-hash-card" class="boot-hash-card">
         <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
-        <div class="boot-hash-value">
+        <div class="boot-hash-value ripple-element">
             <textarea id="boot-hash-input" class="input-box" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder"></textarea>
         </div>
         <div class="boot-hash-button-container">
-            <button id="boot-hash-save-button" class="boot-hash-save-button" data-i18n="boot_hash.save_button"></button>
+            <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
         </div>
     </div>
 
@@ -240,11 +240,11 @@
                 <br>
                 <p>
                 <div class="link">
-                    <i class="link-icon" id="telegram" aria-hidden="true">
+                    <i class="link-icon ripple-element" id="telegram" aria-hidden="true">
                         <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
                         <span id="link-text" data-i18n="about.telegram_channel"></span>
                     </i>
-                    <i class="link-icon" id="github" aria-hidden="true">
+                    <i class="link-icon ripple-element" id="github" aria-hidden="true">
                         <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
                         <span id="link-text" data-i18n="about.github"></span>
                     </i>
@@ -266,8 +266,8 @@
                 <h1 data-i18n="update.changelog"></h1>
                 <div class="changelog"></div>
                 <div class="update-button-container">
-                    <button class="install" data-i18n="update.install"></button>
-                    <button class="reboot" data-i18n="update.reboot"></button>
+                    <button class="install ripple-element" data-i18n="update.install"></button>
+                    <button class="reboot ripple-element" data-i18n="update.reboot"></button>
                 </div>
             </div>
         </div>
@@ -327,10 +327,10 @@
             </div>
 
             <div>
-                <button id="get-patch" class="get-button" data-i18n="security_patch.get_date"></button>
+                <button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button>
                 <div class="button-container">
-                    <button id="auto-config" class="auto-button" data-i18n="security_patch.auto"></button>
-                    <button id="save-patch" class="save-button" data-i18n="security_patch.save"></button>
+                    <button id="auto-config" class="auto-button ripple-element" data-i18n="security_patch.auto"></button>
+                    <button id="save-patch" class="save-button ripple-element" data-i18n="security_patch.save"></button>
                 </div>
             </div>
         </div>
@@ -338,7 +338,7 @@
 
     <!-- Footer -->
     <div class="footer">
-        <div class="uninstall-container hidden-uninstall">
+        <div class="uninstall-container ripple-element hidden-uninstall">
             <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
             <span data-i18n="functional_button.uninstall_webui"></span>
         </div>
diff --git a/module/webui/scripts/language.js b/module/webui/scripts/language.js
index 2904aa5..afd4763 100644
--- a/module/webui/scripts/language.js
+++ b/module/webui/scripts/language.js
@@ -128,7 +128,7 @@ async function generateLanguageMenu() {
     const sortedLanguages = languageData.sort((a, b) => a.name.localeCompare(b.name));
     sortedLanguages.forEach(({ lang, name }) => {
         const button = document.createElement('button');
-        button.classList.add('language-option');
+        button.classList.add('language-option', 'ripple-element');
         button.setAttribute('data-lang', lang);
         button.textContent = name;
         languageMenu.appendChild(button);
diff --git a/module/webui/scripts/main.js b/module/webui/scripts/main.js
index 32d6af4..8f71383 100644
--- a/module/webui/scripts/main.js
+++ b/module/webui/scripts/main.js
@@ -21,7 +21,6 @@ export const basePath = "set-path";
 export const appsWithExclamation = [];
 export const appsWithQuestion = [];
 const ADDITIONAL_APPS = [ "android", "com.android.vending", "com.google.android.gms", "io.github.vvb2060.keyattestation", "io.github.vvb2060.mahoshojo", "icu.nullptr.nativetest" ]; // Always keep default apps in target.txt
-const rippleClasses = ['.language-option', '.menu-button', '.menu-options li', '.search-card', '.card', '.update-card', '.link-icon', '.floating-btn', '.uninstall-container', '.boot-hash-save-button', '.boot-hash-value', '.reboot', '.install', '.file-item', '.save-button', '.auto-button', '.get-button'];
 
 // Variables
 let e = 0;
@@ -232,63 +231,59 @@ function hideFloatingBtn() {
 
 // Function to apply ripple effect
 export function applyRippleEffect() {
-    rippleClasses.forEach(selector => {
-        document.querySelectorAll(selector).forEach(element => {
-            if (element.dataset.rippleListener !== "true") {
-                element.addEventListener("pointerdown", function (event) {
-                    if (isScrolling) return;
-                    if (modeActive) return;
+    document.querySelectorAll('.ripple-element').forEach(element => {
+        if (element.dataset.rippleListener !== "true") {
+            element.addEventListener("pointerdown", function (event) {
+                if (isScrolling) return;
+                const ripple = document.createElement("span");
+                ripple.classList.add("ripple");
 
-                    const ripple = document.createElement("span");
-                    ripple.classList.add("ripple");
+                // Calculate ripple size and position
+                const rect = element.getBoundingClientRect();
+                const width = rect.width;
+                const size = Math.max(rect.width, rect.height);
+                const x = event.clientX - rect.left - size / 2;
+                const y = event.clientY - rect.top - size / 2;
 
-                    // Calculate ripple size and position
-                    const rect = element.getBoundingClientRect();
-                    const width = rect.width;
-                    const size = Math.max(rect.width, rect.height);
-                    const x = event.clientX - rect.left - size / 2;
-                    const y = event.clientY - rect.top - size / 2;
+                // Determine animation duration
+                let duration = 0.2 + (width / 800) * 0.4;
+                duration = Math.min(0.8, Math.max(0.2, duration));
 
-                    // Determine animation duration
-                    let duration = 0.3 + (width / 800) * 0.3;
-                    duration = Math.min(0.8, Math.max(0.2, duration));
+                // Set ripple styles
+                ripple.style.width = ripple.style.height = `${size}px`;
+                ripple.style.left = `${x}px`;
+                ripple.style.top = `${y}px`;
+                ripple.style.animationDuration = `${duration}s`;
+                ripple.style.transition = `opacity ${duration}s ease`;
 
-                    // Set ripple styles
-                    ripple.style.width = ripple.style.height = `${size}px`;
-                    ripple.style.left = `${x}px`;
-                    ripple.style.top = `${y}px`;
-                    ripple.style.animationDuration = `${duration}s`;
-                    ripple.style.transition = `opacity ${duration}s ease`;
+                // Adaptive color
+                const computedStyle = window.getComputedStyle(element);
+                const bgColor = computedStyle.backgroundColor || "rgba(0, 0, 0, 0)";
+                const textColor = computedStyle.color;
+                const isDarkColor = (color) => {
+                    const rgb = color.match(/\d+/g);
+                    if (!rgb) return false;
+                    const [r, g, b] = rgb.map(Number);
+                    return (r * 0.299 + g * 0.587 + b * 0.114) < 96; // Luma formula
+                };
+                ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : "";
 
-                    // Adaptive color
-                    const computedStyle = window.getComputedStyle(element);
-                    const bgColor = computedStyle.backgroundColor || "rgba(0, 0, 0, 0)";
-                    const textColor = computedStyle.color;
-                    const isDarkColor = (color) => {
-                        const rgb = color.match(/\d+/g);
-                        if (!rgb) return false;
-                        const [r, g, b] = rgb.map(Number);
-                        return (r * 0.299 + g * 0.587 + b * 0.114) < 96; // Luma formula
-                    };
-                    ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : "";
-
-                    // Append ripple and handle cleanup
-                    element.appendChild(ripple);
-                    const handlePointerUp = () => {
-                        ripple.classList.add("end");
-                        setTimeout(() => {
-                            ripple.classList.remove("end");
-                            ripple.remove();
-                        }, duration * 1000);
-                        element.removeEventListener("pointerup", handlePointerUp);
-                        element.removeEventListener("pointercancel", handlePointerUp);
-                    };
-                    element.addEventListener("pointerup", handlePointerUp);
-                    element.addEventListener("pointercancel", handlePointerUp);
-                });
-                element.dataset.rippleListener = "true";
-            }
-        });
+                // Append ripple and handle cleanup
+                element.appendChild(ripple);
+                const handlePointerUp = () => {
+                    ripple.classList.add("end");
+                    setTimeout(() => {
+                        ripple.classList.remove("end");
+                        ripple.remove();
+                    }, duration * 1000);
+                    element.removeEventListener("pointerup", handlePointerUp);
+                    element.removeEventListener("pointercancel", handlePointerUp);
+                };
+                element.addEventListener("pointerup", handlePointerUp);
+                element.addEventListener("pointercancel", handlePointerUp);
+            });
+            element.dataset.rippleListener = "true";
+        }
     });
 }
 
diff --git a/module/webui/styles/about.css b/module/webui/styles/about.css
index 20e6c40..6e4f081 100644
--- a/module/webui/styles/about.css
+++ b/module/webui/styles/about.css
@@ -91,8 +91,6 @@
     box-sizing: border-box;
     margin-bottom: 5px;
     transition: background-color 0.2s ease;
-    position: relative;
-    overflow: hidden;
 }
 
 .link-icon svg {
diff --git a/module/webui/styles/applist.css b/module/webui/styles/applist.css
index bfc282b..450f8cf 100644
--- a/module/webui/styles/applist.css
+++ b/module/webui/styles/applist.css
@@ -23,8 +23,6 @@
     padding: 12px;
     width: calc(100% - 30px);
     max-width: 900px;
-    position: relative;
-    overflow: hidden;
 }
 
 #update-available {
@@ -156,8 +154,6 @@
     width: calc(100% - 30px);
     max-width: 900px;
     transition: background-color 0.2s ease;
-    position: relative;
-    overflow: hidden;
 }
 
 .content {
@@ -225,8 +221,6 @@
     box-sizing: border-box;
     transition: all 0.2s ease;
     border: 3px solid transparent;
-    position: relative;
-    overflow: hidden;
 }
 
 #normal-indicator {
diff --git a/module/webui/styles/boot_hash.css b/module/webui/styles/boot_hash.css
index e730132..8d24d2a 100644
--- a/module/webui/styles/boot_hash.css
+++ b/module/webui/styles/boot_hash.css
@@ -57,8 +57,6 @@
     border: 1px solid #ccc;
     border-radius: 10px;
     box-sizing: border-box;
-    position: relative;
-    overflow: hidden;
 }
 
 .input-box {
diff --git a/module/webui/styles/global.css b/module/webui/styles/global.css
index 2939055..83b7c06 100644
--- a/module/webui/styles/global.css
+++ b/module/webui/styles/global.css
@@ -33,7 +33,6 @@ body {
     font-weight: bold;
     transition: transform 0.4s ease;
     border-radius: 50px 50px;
-    overflow: hidden;
     user-select: none;
 }
 
@@ -236,6 +235,11 @@ body {
     font-size: 16px;
 }
 
+.ripple-element {
+    position: relative;
+    overflow: hidden;
+}
+
 .ripple {
     position: absolute;
     border-radius: 50%;
diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css
index b30630f..0774f68 100644
--- a/module/webui/styles/header.css
+++ b/module/webui/styles/header.css
@@ -93,7 +93,6 @@
     width: 100%;
     white-space: nowrap;
     position: relative;
-    overflow: hidden;
     user-select: none;
 }
 
diff --git a/module/webui/styles/search_menu.css b/module/webui/styles/search_menu.css
index 15cbdbb..b0d3bcc 100644
--- a/module/webui/styles/search_menu.css
+++ b/module/webui/styles/search_menu.css
@@ -24,7 +24,6 @@
     height: calc(100% - 2px);
     width: calc(100% - 60px);
     position: absolute;
-    overflow: hidden;
 }
 
 .search-icon {
@@ -78,8 +77,6 @@
     justify-content: center;
     z-index: 200;
     align-items: center;
-    position: relative;
-    overflow: hidden;
 }
 
 .menu-icon {
@@ -135,8 +132,6 @@
     padding: 12px 15px;
     text-align: left;
     background-color: white;
-    position: relative;
-    overflow: hidden;
 }
 
 .menu-options li::after {
diff --git a/module/webui/styles/security_patch.css b/module/webui/styles/security_patch.css
index 35ace63..3341c23 100644
--- a/module/webui/styles/security_patch.css
+++ b/module/webui/styles/security_patch.css
@@ -137,8 +137,6 @@
     border-radius: 12px;
     font-size: 18px;
     font-weight: bold;
-    position: relative;
-    overflow: hidden;
     transition: background-color 0.2s ease;
 }