From 28e9801f61f1055df070840f79455f8f61912171 Mon Sep 17 00:00:00 2001
From: Arushi-Ojha <arushiojha100@gmail.com>
Date: Fri, 31 Oct 2025 20:00:20 +0530
Subject: [PATCH] Fix: Make action buttons responsive with flex-wrap and
 debugged bacdrop-filter issue

---
 style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/style.css b/style.css
index cd3e926..3ca4f01 100644
--- a/style.css
+++ b/style.css
@@ -213,6 +213,7 @@ body.dark-mode button {
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   opacity: 0;
   visibility: hidden;
@@ -606,6 +607,7 @@ body.light-theme .controls .ghost-btn:hover {
 @media (max-width: 900px) {
   .controls {
     background: rgba(40, 37, 63, 0.95) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
     backdrop-filter: blur(20px) !important;
   }
 
@@ -798,6 +800,7 @@ body.light-theme .goog-te-gadget-simple span {
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   padding: 25px;
+  -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--mood-primary),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -1272,6 +1275,7 @@ body.light-theme .goog-te-gadget-simple span {
   display: flex;
   gap: 12px;
   margin-top: 6px;
+  flex-wrap: wrap;
 }
 
 .primary {
@@ -1419,6 +1423,7 @@ body.light-theme .goog-te-gadget-simple span {
   transition: all 0.2s ease;
   font-size: 13px;
   font-weight: 500;
+  -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
 }
 
@@ -1524,6 +1529,7 @@ body {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
+  -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   z-index: 1000;
   display: flex;