testing: adding smooth animation for comment hding

public/s/css/f0ckm.css

@@ -1694,7 +1694,7 @@ body.sidebar-right-hidden .global-sidebar-right {
      ---------------------------------------------------------- */
   body.layout-modern .item-layout-container {
     display: grid;
-    grid-template-columns: 400px minmax(0, 1fr) 300px;
+    grid-template-columns: min(400px, 30vw) minmax(0, 1fr) 300px;
     grid-template-rows: auto;
     flex: 1;
     height: calc(100vh - var(--navbar-h, 50px));
@@ -1705,7 +1705,7 @@ body.sidebar-right-hidden .global-sidebar-right {
 
   /* Collapsed right sidebar — grid track shrinks to 0 */
   body.layout-modern.sidebar-right-hidden .item-layout-container {
-    grid-template-columns: 400px minmax(0, 1fr) 0px;
+    grid-template-columns: min(400px, 30vw) minmax(0, 1fr) 0px;
   }
 
   body.layout-modern .item-sidebar-left {
@@ -1776,6 +1776,7 @@ body.sidebar-right-hidden .global-sidebar-right {
     grid-template-columns: 1fr;
   }
 
+  /* By the time sidebar-hidden is added (post-slide), content is already off-screen */
   body.layout-modern .item-layout-container.sidebar-hidden .item-sidebar-left {
     display: none;
   }
@@ -1803,15 +1804,6 @@ body.sidebar-right-hidden .global-sidebar-right {
 
   /* Removed local sidebar and toggle overrides — now using universal rules */
 
-  /* Collapse right sidebar on narrower screens in modern view */
-  @media (max-width: 1400px) {
-    body.layout-modern .item-layout-container {
-      grid-template-columns: 400px minmax(0, 1fr);
-    }
-
-    /* Uses universal fixed slide-out logic; no need for display: none at this breakpoint */
-  }
-
   /* ----------------------------------------------------------
      LAYOUT: LEGACY — 2-column, natural page scroll
      Right sidebar is fixed to viewport.
@@ -2219,6 +2211,7 @@ body.sidebar-right-hidden .global-sidebar-right {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
 /* Modern: comments fill all remaining left-sidebar space; list scrolls internally */
@@ -2249,11 +2242,25 @@ body.layout-modern .item-sidebar-left .tag-controls {
   flex-shrink: 0;
 }
 
-#comments-container.faded-out {
+/* Modern layout: slide left inside the clipped sidebar column */
+.item-sidebar-left #comments-container.faded-out,
+.item-sidebar-left .sidebar-tags-container.faded-out,
+.item-sidebar-left .tag-controls.faded-out {
+  transform: translateX(-110%);
+  pointer-events: none;
+}
+
+/* Legacy layout: simple opacity fade (overflow:visible means translateX hangs visible) */
+body.layout-legacy #comments-container.faded-out {
   opacity: 0;
   pointer-events: none;
 }
 
+.item-sidebar-left .sidebar-tags-container,
+.item-sidebar-left .tag-controls {
+  transition: transform 0.3s ease-in-out;
+}
+
 
 .comments-controls {
   display: flex;

public/s/js/comments.js

@@ -3331,28 +3331,31 @@ class CommentSystem {
         if (!this.container) return;
 
         const layout = this.container.closest('.item-layout-container');
+        const sidebar = this.container.closest('.item-sidebar-left');
+        const siblings = sidebar ? [
+            ...sidebar.querySelectorAll('.sidebar-tags-container, .tag-controls')
+        ] : [];
 
-        // Check if currently hidden (or fading out)
+        // Check if currently hidden (or slid out)
         const isHidden = this.container.classList.contains('faded-out') || this.container.style.display === 'none';
 
         if (isHidden) {
-            // SHOW
+            // SHOW: expand grid first, then slide content in
-            this.container.style.display = 'block';
             if (layout) layout.classList.remove('sidebar-hidden');
+            this.container.style.display = '';
             localStorage.setItem('comments_hidden', 'false');
-            // Force reflow to enable transition
+            void this.container.offsetWidth; // force reflow so transition fires
-            void this.container.offsetWidth;
             this.container.classList.remove('faded-out');
+            siblings.forEach(el => el.classList.remove('faded-out'));
         } else {
-            // HIDE
+            // HIDE: slide content out first, then collapse grid
             localStorage.setItem('comments_hidden', 'true');
             this.container.classList.add('faded-out');
-            if (layout) layout.classList.add('sidebar-hidden');
+            siblings.forEach(el => el.classList.add('faded-out'));
-            // Wait for transition, then set display none
             setTimeout(() => {
-                if (this.container.classList.contains('faded-out')) {
+                if (!this.container.classList.contains('faded-out')) return;
                 this.container.style.display = 'none';
-                }
+                if (layout) layout.classList.add('sidebar-hidden');
             }, 300);
         }
     }