From e637416d6e25089734ae6651be7e4e4ab0e2307f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 19 Oct 2023 14:53:53 +0100
Subject: [PATCH 1/3] [web] Adjust CSS filters for blurring the UI

For blur not only inert or aria-hidden children of body, but the inert
or aria-hidden wrapper inside div#root. Useful to apply these visual
effects to the Agama content when the sidebar is open.

Being conservative to avoid problems already solved in
https://github.com/openSUSE/agama/pull/588
---
 web/src/assets/styles/composition.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/assets/styles/composition.scss b/web/src/assets/styles/composition.scss
index 25c2548932..e5d714707a 100644
--- a/web/src/assets/styles/composition.scss
+++ b/web/src/assets/styles/composition.scss
@@ -29,6 +29,8 @@
 }
 
 body > div[inert],
-body > div[aria-hidden="true"] {
+body > div[aria-hidden="true"],
+div#root > div.wrapper[inert],
+div#root > div.wrapper[aria-hidden="true"] {
   filter: grayscale(1) blur(2px);
 }

From 8a8dc8e257df24cfdbe367e8905fddfe1525a3d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 19 Oct 2023 15:00:49 +0100
Subject: [PATCH 2/3] [web] Add id for the Agama main wrapper

To fine tuning the styles adding CSS filters in ordert to avoid
potential problems using the so common "wrapper" CSS class.
---
 web/src/assets/styles/composition.scss | 4 ++--
 web/src/components/layout/Layout.jsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/assets/styles/composition.scss b/web/src/assets/styles/composition.scss
index e5d714707a..a78eaaab05 100644
--- a/web/src/assets/styles/composition.scss
+++ b/web/src/assets/styles/composition.scss
@@ -30,7 +30,7 @@
 
 body > div[inert],
 body > div[aria-hidden="true"],
-div#root > div.wrapper[inert],
-div#root > div.wrapper[aria-hidden="true"] {
+div#agama-main-wrapper[inert],
+div#agama-main-wrapper[aria-hidden="true"] {
   filter: grayscale(1) blur(2px);
 }
diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index c6bbcbd4d9..4277184fd4 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -67,7 +67,7 @@ function Layout({ children }) {
   return (
     <>
       <Sidebar.Target as="div" />
-      <div className="wrapper shadow">
+      <div id="agama-main-wrapper" className="wrapper shadow">
         <header className="split justify-between bottom-shadow">
           <h1 className="split">
             <HeaderIcon.Target as="span" />

From 18f0564ef6a82751f7135c4d94357340b57eba6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 19 Oct 2023 23:10:43 +0100
Subject: [PATCH 3/3] [web] Update changes file

---
 web/package/cockpit-agama.changes | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 2db5504ee6..a2283ae8e0 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Thu Oct 19 22:07:11 UTC 2023 - David Diaz <dgonzalez@suse.com>
+
+- UI: fix CSS rule for applying grayscale and blur CSS filters to
+  main wrapper when the sidebar is open (gh#openSUSE/agama#802).
+
 -------------------------------------------------------------------
 Tue Oct 17 10:59:37 UTC 2023 - Imobach González Sosa <igonzalezsosa@suse.com>