From 469a44c85b8aafe7b658e414b93adda01b9d6a54 Mon Sep 17 00:00:00 2001
From: Ashvin-KS <ashvinksg@gmail.com>
Date: Wed, 17 Jun 2026 15:39:18 +0530
Subject: [PATCH] fix: shift main content past fixed sidebar dock on desktop

The 'clean' sidebar overrides at the end of styles.css were zeroing out
the desktop padding-left values (296px expanded, 128px collapsed) that
the @media (min-width: 1100px) block sets. As a result the fixed
position sidebar overlapped the projects grid on the left and clipped
the first column of cards (Dots & Boxes -> and Boxes, FLAMES -> MES, etc.).

- Move the mobile-only padding: 0 overrides inside @media (max-width: 1099px)
  so they no longer cancel the desktop-aware layout.
- Add a smooth padding-left transition for the desktop sidebar state
  changes (open / collapse / close).

Closes #1155
Closes #1136
---
 web-app/css/styles.css | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index 4a1846c..ea53525 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -6382,15 +6382,34 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer button {
   max-width: 100% !important;
 }
 
-/* Remove any extra padding/margin */
-.projects-section {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
+/*
+ * Desktop sidebar-aware layout keeps the projects section shifted past the
+ * fixed sidebar dock (see the @media (min-width: 1100px) block above for
+ * padding-left values). The rules below intentionally only apply on mobile,
+ * where the sidebar slides in as a drawer and must not push the main column.
+ */
+@media (max-width: 1099px) {
+  .projects-section {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 
-body.sidebar-active .projects-section,
-body.sidebar-collapsed .projects-section {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+  body.sidebar-active .projects-section,
+  body.sidebar-collapsed .projects-section {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 }
+
+/* Smooth main-content shift when the sidebar opens, closes, or collapses on
+ * desktop. The padding-left values themselves are defined above inside the
+ * 1100px media query. */
+@media (min-width: 1100px) {
+  .projects-section,
+  .hero-section,
+  .hero-timeline-section,
+  .playground-section,
+  .footer {
+    transition: padding-left 280ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
 }