From c4a4b7c4fbbe1566c4f4a4b6dcd77fa09ec7855f Mon Sep 17 00:00:00 2001
From: Timothy Atapagra <tim.atapagra@gmail.com>
Date: Tue, 28 Oct 2025 20:35:52 -0400
Subject: [PATCH] fix(styles): correct outline-offset values in navigation and
 grid styles

- Updated the outline-offset property for focus-visible states in LeftNavigation.css and LibraryGrid.css from -2px to 2px for improved accessibility and visual consistency.
- Adjusted the gap in LibraryGrid.css from var(--space-3) to var(--space-4) to enhance layout spacing.
---
 packages/web-vite/src/styles/LeftNavigation.css | 6 +++---
 packages/web-vite/src/styles/LibraryGrid.css    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-vite/src/styles/LeftNavigation.css b/packages/web-vite/src/styles/LeftNavigation.css
index 99151510b..b73bc0ee1 100644
--- a/packages/web-vite/src/styles/LeftNavigation.css
+++ b/packages/web-vite/src/styles/LeftNavigation.css
@@ -109,7 +109,7 @@
 
 .nav-item:focus-visible {
   outline: 2px solid var(--color-action-blue);
-  outline-offset: -2px;
+  outline-offset: 2px;
   background: #333;
   color: #fff;
 }
@@ -204,7 +204,7 @@
 
 .shortcut-item:focus-visible {
   outline: 2px solid var(--color-action-blue);
-  outline-offset: -2px;
+  outline-offset: 2px;
   background: #333;
   color: #fff;
 }
@@ -246,7 +246,7 @@
 
 .filter-shortcut-item:focus-visible {
   outline: 2px solid var(--color-action-blue);
-  outline-offset: -2px;
+  outline-offset: 2px;
   background: #333;
   color: #fff;
 }
diff --git a/packages/web-vite/src/styles/LibraryGrid.css b/packages/web-vite/src/styles/LibraryGrid.css
index 4d9a52649..d2a3c329b 100644
--- a/packages/web-vite/src/styles/LibraryGrid.css
+++ b/packages/web-vite/src/styles/LibraryGrid.css
@@ -18,14 +18,14 @@
 @media (max-width: 1200px) {
   .articles-grid {
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: var(--space-3);  /* 1rem */
+    gap: var(--space-4);  /* 1rem */
   }
 }
 
 @media (max-width: 768px) {
   .articles-grid {
     grid-template-columns: 1fr;
-    gap: var(--space-3);  /* 1rem */
+    gap: var(--space-4);  /* 1rem */
   }
 }