From 8853b633a44098278a53efa8dee2c73f8057d8b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wiktor=20Mr=C3=B3wczy=C5=84ski?= Date: Mon, 11 May 2026 10:31:05 +0200 Subject: [PATCH 1/3] Fixing z-index in .nav-main style class --- resources/css/core/layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 8299d321b77..9345c2759fa 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -116,7 +116,7 @@ @media (width < theme(--breakpoint-lg)) { .nav-main { /* Always visible but off-screen by default */ - @apply flex; + @apply flex z-6; @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700; } From 3f36b4af1839c6c4489671361b57362fe2128f95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wiktor=20Mr=C3=B3wczy=C5=84ski?= Date: Tue, 12 May 2026 14:47:33 +0200 Subject: [PATCH 2/3] Use z-index CSS variable instead of Tailwind utility in .nav-main --- resources/css/core/layout.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 9345c2759fa..91256397c1b 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -116,7 +116,8 @@ @media (width < theme(--breakpoint-lg)) { .nav-main { /* Always visible but off-screen by default */ - @apply flex z-6; + z-index: var(--z-index-max); + @apply flex; @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700; } From dc3c6fb0db40136560f8dd40804bfbd24a590101 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Tue, 12 May 2026 14:39:14 -0400 Subject: [PATCH 3/3] Lower grid sticky header z-index instead of raising nav The grid fieldtype's sticky `thead th` was at `--z-index-draggable` (3), which matched the side nav and caused it to render over the mobile nav when sliding in. The table fieldtype uses `--z-index-above` (1) for the same kind of sticky header without issue, so bring grid in line and revert the nav-main z-index bump. --- resources/css/components/fieldtypes/grid.css | 2 +- resources/css/core/layout.css | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css index 107723272eb..5aa62578ca0 100644 --- a/resources/css/components/fieldtypes/grid.css +++ b/resources/css/components/fieldtypes/grid.css @@ -12,7 +12,7 @@ } thead th { - @apply sticky -top-2 table-cell z-(--z-index-draggable) border-b bg-gray-50 p-2 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100; + @apply sticky -top-2 table-cell z-(--z-index-above) border-b bg-gray-50 p-2 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100; /* Prevent the sticky toolbar from hitting the very end of container, which causes it to overlap the container's border-radius */ margin-block-end: 8px; /* Pull the subsequent element up to compensate for this */ diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 91256397c1b..8299d321b77 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -116,7 +116,6 @@ @media (width < theme(--breakpoint-lg)) { .nav-main { /* Always visible but off-screen by default */ - z-index: var(--z-index-max); @apply flex; @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700; }