From 8c1caa8dbb89bf6691637e066b53f7e47ddef441 Mon Sep 17 00:00:00 2001
From: Diego Rodrigues de Sa e Souza <souzamiriamrodrigues790@gmail.com>
Date: Tue, 23 Jun 2026 14:16:43 -0300
Subject: [PATCH] fix(dashboard): keep desktop sidebar visible via explicit CSS
 class

Replace the fragile `hidden`/`lg:flex` Tailwind cascade on the desktop
sidebar wrapper with an explicit `.dashboard-sidebar-desktop` class backed
by a 1024px media query in globals.css. Class ordering/specificity could
collapse the `lg:flex` override and leave the desktop dashboard sidebar
permanently hidden; the dedicated class is order-independent. The class
keeps `min-height: 0` to preserve the previous `min-h-0` behavior.

Co-authored-by: Delcado <85063283+Delcado19@users.noreply.github.com>
Inspired-by: https://github.com/decolua/9router/pull/1504
---
 src/app/globals.css                           | 12 ++++
 .../components/layouts/DashboardLayout.tsx    |  4 +-
 .../dashboard-sidebar-desktop-visible.test.ts | 64 +++++++++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/dashboard-sidebar-desktop-visible.test.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index 489a58688f4..4df43dff070 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -496,3 +496,15 @@ select option {
 .react-flow__controls-button svg {
   fill: var(--color-text-main);
 }
+
+/* Desktop sidebar visibility must not depend on Tailwind's hidden/lg:flex cascade
+   (ordering/specificity can collapse it). Explicit class + 1024px media query. */
+.dashboard-sidebar-desktop {
+  display: none;
+  min-height: 0;
+}
+@media (min-width: 1024px) {
+  .dashboard-sidebar-desktop {
+    display: flex;
+  }
+}
diff --git a/src/shared/components/layouts/DashboardLayout.tsx b/src/shared/components/layouts/DashboardLayout.tsx
index 0a0a3fa866e..f72841a6e7c 100644
--- a/src/shared/components/layouts/DashboardLayout.tsx
+++ b/src/shared/components/layouts/DashboardLayout.tsx
@@ -73,8 +73,8 @@ export default function DashboardLayout({ children }) {
         />
       )}
 
-      {/* Sidebar - Desktop */}
-      <div className="hidden min-h-0 lg:flex">
+      {/* Sidebar - Desktop: keep visibility independent from Tailwind hidden/lg:flex ordering. */}
+      <div className="dashboard-sidebar-desktop">
         <Sidebar
           collapsed={collapsed}
           onToggleCollapse={handleToggleCollapse}
diff --git a/tests/unit/dashboard-sidebar-desktop-visible.test.ts b/tests/unit/dashboard-sidebar-desktop-visible.test.ts
new file mode 100644
index 00000000000..de1a9a65ed7
--- /dev/null
+++ b/tests/unit/dashboard-sidebar-desktop-visible.test.ts
@@ -0,0 +1,64 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+
+function readSrc(path: string): string {
+  return readFileSync(join(ROOT, path), "utf8");
+}
+
+// Regression guard: the desktop dashboard sidebar must stay visible on desktop.
+// The old `hidden ... lg:flex` Tailwind cascade is fragile — class ordering /
+// specificity can collapse the `lg:flex` and leave the sidebar permanently
+// hidden. The fix moves visibility into an explicit `.dashboard-sidebar-desktop`
+// class backed by a 1024px media query in globals.css.
+
+test("DashboardLayout desktop sidebar uses the explicit visibility class, not the hidden/lg:flex cascade", () => {
+  const source = readSrc("src/shared/components/layouts/DashboardLayout.tsx");
+
+  // The desktop sidebar wrapper must reference the dedicated class.
+  assert.match(
+    source,
+    /className="dashboard-sidebar-desktop"/,
+    "Desktop sidebar wrapper must use the dashboard-sidebar-desktop class"
+  );
+
+  // The fragile Tailwind cascade must be gone.
+  assert.doesNotMatch(
+    source,
+    /className="hidden[^"]*lg:flex"/,
+    "Desktop sidebar wrapper must not rely on the hidden/lg:flex Tailwind cascade"
+  );
+});
+
+test("globals.css defines dashboard-sidebar-desktop hidden by default and flex at >=1024px", () => {
+  const css = readSrc("src/app/globals.css");
+
+  // Class exists.
+  assert.match(
+    css,
+    /\.dashboard-sidebar-desktop\s*\{/,
+    "globals.css must define .dashboard-sidebar-desktop"
+  );
+
+  // Hidden by default (mobile-first), then shown via a 1024px desktop media query.
+  const classIndex = css.indexOf(".dashboard-sidebar-desktop");
+  const desktopRule =
+    /@media\s*\(min-width:\s*1024px\)\s*\{[^}]*\.dashboard-sidebar-desktop\s*\{[^}]*display:\s*flex/;
+  assert.match(
+    css.slice(classIndex - 200),
+    desktopRule,
+    "globals.css must show .dashboard-sidebar-desktop with display:flex at min-width:1024px"
+  );
+
+  // Default state hides it (display:none) so mobile is unaffected.
+  const baseRule = /\.dashboard-sidebar-desktop\s*\{[^}]*display:\s*none/;
+  assert.match(
+    css,
+    baseRule,
+    "globals.css must hide .dashboard-sidebar-desktop by default (display:none)"
+  );
+});