feat: Enhance UI/UX with query key formatting, improved selection states, and streamlined CSS architecture

Author: dborysov

src/components/query/QueryListItem.tsx

@@ -76,7 +76,7 @@ export function QueryListItem({ query, index, isSelected, onSelect, staggerIndex
         <StatusBadge status={status} count={query.observersCount} transitionDuration={500} />
 
         {/* Query key */}
-        <div className="flex-1 font-mono text-xs text-gray-700 dark:text-gray-300 truncate">{formatQueryKeyShort(query.queryKey)}</div>
+        <div className="flex-1 font-mono text-xs text-gray-700 dark:text-gray-300 break-all">{formatQueryKeyShort(query.queryKey)}</div>
       </div>
     </div>
   );

src/index.css

@@ -5,4 +5,4 @@
 @import "./styles/animations.css";
 
 /* Modern CSS Architecture with Cascade Layers */
-@layer base, responsive, components, cards, animations;
+@layer base, components, cards, animations;

src/styles/cards.css

@@ -16,8 +16,9 @@
 
   /* Selection states with blue theming */
   .card-selected {
-    @apply bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-700;
-    @apply ring-2 ring-blue-500/20 dark:ring-blue-400/30;
+    @apply bg-blue-100 dark:bg-blue-900/50 border-blue-300 dark:border-blue-600;
+    @apply ring-2 ring-blue-500/40 dark:ring-blue-400/50;
+    @apply border-l-4 border-l-blue-500 dark:border-l-blue-400;
   }
 
   /* Container query-enabled containers */

src/utils/formatters.ts

@@ -1,7 +1,7 @@
 // Helper function to format query key (single line for list)
 export function formatQueryKeyShort(queryKey: readonly unknown[]): string {
   try {
-    return JSON.stringify(queryKey).replace(/"/g, "");
+    return JSON.stringify(queryKey);
   } catch {
     return String(queryKey);
   }