From c2063cd73b08bad0ef12e73cd3ff0d3cbb971766 Mon Sep 17 00:00:00 2001
From: Demonessica <37988730+Demonessica@users.noreply.github.com>
Date: Thu, 29 May 2025 15:17:15 -0700
Subject: [PATCH] Fix CSS performance issues from #857 while preserving
 functionality (#928)

## Description:
Replaces the `all` selector with a specific class to reduce CSS
computation. Maintains functionality of hiding the news button.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

`demonessica`
---
 src/client/index.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/client/index.html b/src/client/index.html
index 35736cf21..f7f76bc02 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -99,6 +99,11 @@
           display: none;
         }
       }
+
+      /* display:none if child has class parent-hidden since we can't use shadow DOM in Lit due to Tailwind */
+      .component-hideable:has(> .parent-hidden) {
+        display: none;
+      }
     </style>
 
     <!-- Immediate execution to prevent FOUC -->
@@ -224,7 +229,9 @@
         <div class="container__row">
           <flag-input class="w-[20%] md:w-[15%]"></flag-input>
           <username-input class="relative w-full"></username-input>
-          <news-button class="w-[20%] md:w-[15%]"></news-button>
+          <news-button
+            class="w-[20%] md:w-[15%] component-hideable"
+          ></news-button>
         </div>
         <div></div>
         <div>