Add grid overlay for testing layout alignment

Adds CSS rules to `client/src/index.css` to enable a visual grid overlay for layout testing when the `show-grid` class is applied to the body.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Sy6XHzr
This commit is contained in:
sebastjanartic 2025-08-30 16:39:17 +00:00
parent 465d4c1923
commit 4a0b1dde6d

View File

@ -333,4 +333,20 @@ input[data-testid*="search"]::placeholder {
user-select: none;
opacity: 0.08;
filter: blur(0.5px);
}
/* Test grid overlay */
body.show-grid::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
background-image:
linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px);
background-size: 20px 20px;
}