From 4d31e421846473af440fb9206a21b762a8e59f67 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 4 Sep 2025 13:03:54 +0000
Subject: [PATCH] Improve visual grid overlay for smaller screens

Adjust CSS for the grid overlay to be active only on mobile devices (max-width: 768px) and increase the opacity of the grid lines.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/JlONw6J
---
 client/src/index.css | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 534433b..61f515a 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -443,18 +443,20 @@ input[data-testid*="search"]::placeholder {
   }
 }
 
-/* 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;
+/* Test grid overlay - aktivna za mobilne naprave */
+@media (max-width: 768px) {
+  body::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.3) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 0, 0, 0.3) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
 }
\ No newline at end of file