From 3c39511d499f6a97a31ea8f1037d3997c196c19e Mon Sep 17 00:00:00 2001
From: Krzysztof G <60067306+gikf@users.noreply.github.com>
Date: Tue, 20 Feb 2024 10:40:19 +0100
Subject: [PATCH] fix(client): keep editor tabs buttons visible (#53373)

---
 .../src/components/Header/components/universal-nav.css   | 4 ++--
 client/src/templates/Challenges/classic/classic.css      | 9 ++++++---
 e2e/action-row.spec.ts                                   | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css
index 2cc70158347..be6da1402bc 100644
--- a/client/src/components/Header/components/universal-nav.css
+++ b/client/src/components/Header/components/universal-nav.css
@@ -422,10 +422,10 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
 /**
  * Handle submenu containers collapsed and expanded states
  */
-button[aria-expanded='false'] + div {
+#universal-nav button[aria-expanded='false'] + div {
   display: none;
 }
 
-button[aria-expanded='true'] + div {
+#universal-nav button[aria-expanded='true'] + div {
   display: block;
 }
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 30b854f0912..d3cab537679 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -23,20 +23,23 @@
 }
 
 .monaco-editor-tabs button[aria-expanded='true'],
-.panel-display-tabs button[aria-expanded='true'] {
+.panel-display-tabs button[aria-expanded='true'],
+.tabs-row button[aria-expanded='true'] {
   border-color: var(--primary-color);
   background-color: var(--primary-color);
   color: var(--secondary-background);
 }
 
 .monaco-editor-tabs button:hover,
-.panel-display-tabs button:hover {
+.panel-display-tabs button:hover,
+.tabs-row button:hover {
   color: var(--secondary-color);
   background-color: var(--primary-background);
 }
 
 .monaco-editor-tabs button[aria-expanded='true']:hover,
-.panel-display-tabs button[aria-expanded='true']:hover {
+.panel-display-tabs button[aria-expanded='true']:hover,
+.tabs-row button[aria-expanded='true']:hover {
   background-color: var(--quaternary-color);
   color: var(--secondary-background);
 }
diff --git a/e2e/action-row.spec.ts b/e2e/action-row.spec.ts
index 8089c22b628..faa86aaf9bc 100644
--- a/e2e/action-row.spec.ts
+++ b/e2e/action-row.spec.ts
@@ -47,7 +47,7 @@ test('Action row buttons are visible', async ({ isMobile, page }) => {
   }
 });
 
-test('Clicking instructions button hides editor buttons', async ({
+test('Clicking instructions button hides instructions panel, but not editor buttons', async ({
   isMobile,
   page
 }) => {
@@ -62,7 +62,7 @@ test('Clicking instructions button hides editor buttons', async ({
 
     for (let i = 0; i < editorButtons.length; i++) {
       const btn = tabsRow.getByRole('button', { name: editorButtons[i] });
-      await expect(btn).toBeHidden();
+      await expect(btn).toBeVisible();
     }
 
     const instructionsPanelTitle = page.getByRole('heading', {