From 25f2768445140d711666a734b34a9c3531366aeb Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 22 Feb 2025 11:22:34 +0300
Subject: [PATCH] F: Fix tabIndex for modals

---
 TODO.txt                                      |  2 +-
 .../frontend/src/app/ApplicationLayout.tsx    |  8 ++++++-
 rsconcept/frontend/src/styling/setup.css      | 22 +++++++++----------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index 4f730f2f..ab3e1681 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -2,7 +2,7 @@
 For more specific TODOs see comments in code
 
 [Bugs - PENDING]
-- Tab index still selecting background elements when modal is active
+- 
 
 [Functionality - PENDING]
 - Landing page
diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index a2fd7de2..f8467c04 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router';
 
 import { ModalLoader } from '@/components/Modal';
 import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
+import { useDialogsStore } from '@/stores/dialogs';
 
 import { NavigationState } from './Navigation/NavigationContext';
 import { Footer } from './Footer';
@@ -20,6 +21,7 @@ export function ApplicationLayout() {
   const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
   const noNavigation = useAppLayoutStore(state => state.noNavigation);
   const noFooter = useAppLayoutStore(state => state.noFooter);
+  const activeDialog = useDialogsStore(state => state.active);
 
   return (
     <NavigationState>
@@ -39,7 +41,11 @@ export function ApplicationLayout() {
 
         <Navigation />
 
-        <div className='overflow-x-auto max-w-[100vw]' style={{ maxHeight: viewportHeight }}>
+        <div
+          className='overflow-x-auto max-w-[100vw]'
+          style={{ maxHeight: viewportHeight }}
+          inert={activeDialog !== null}
+        >
           <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
             <GlobalLoader />
             <MutationErrors />
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index b77541ed..e6454da2 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -4,16 +4,6 @@
 
 @import './constants.css' layer(base);
 
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--clr-prim-400);
-  }
-}
-
 @layer utilities {
   *,
   *::after,
@@ -24,6 +14,16 @@
     /* background: hsla(135, 50%, 50%, 0.05); */
     /* outline: 2px solid hotpink; */
   }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--clr-prim-400);
+  }
 
   html {
     -webkit-text-size-adjust: none;
@@ -115,9 +115,7 @@
   div:not(.dense) > p:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-}
 
-@layer components {
   h1 {
     font-weight: 600;
     font-size: 1.125rem;