genki

public/s/css/f0ckm.css

@@ -2252,7 +2252,9 @@ body.layout-modern .global-sidebar-right {
   /* layout-modern: force sidebar-right off-screen at ≤599px.
      JS also adds sidebar-right-hidden, but this CSS rule is a reliable failsafe
      that matches layout-legacy's always-hidden behavior at this width. */
-  body.layout-modern .item-sidebar-right {
+  body.layout-modern .item-sidebar-right,
+  body.layout-modern .index-sidebar-right,
+  body.layout-modern .global-sidebar-right {
     right: calc(-1 * min(280px, 80vw)) !important;
   }
 }
@@ -11507,11 +11509,12 @@ body.layout-legacy .navbar-header {
 }
 
 /* layout-modern: restore sidebar right-padding AND block-flow for generic pages
-   (profile, settings, subscriptions, etc.) — identical behaviour to layout-legacy.
+   (profile, settings, subscriptions, tags, etc.) — identical behaviour to layout-legacy.
-   Specialized pages (index, item, meme) manage their own layout, so exclude them. */
+   Specialized pages (index, item, meme) manage their own layout, so exclude them.
-@media (min-width: 1200px) {
+   Must be ≥1000px so the gap at 1000–1199px is covered. */
+@media (min-width: 1000px) {
   body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
-    padding-right: 400px;
+    padding-right: 300px;
   }
 
   body.layout-modern.sidebar-right-hidden>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
@@ -13080,10 +13083,8 @@ body.layout-modern .tag-ac-input {
    Full-height chat layout — conversation page
    ══════════════════════════════════════════════════════════ */
 
-/* ── DESKTOP (> 768px): same pattern as the sidebar ───────
+/* ── UNIVERSAL: position:fixed takes it out of flow entirely ───────
-   position:fixed takes it out of flow entirely — no pagewrapper
+   No pagewrapper padding, no body scroll involvement, just viewport-anchored. */
-   padding, no body scroll involvement, just viewport-anchored. */
-@media (min-width: 769px) {
 .messages-convo-page {
   position: fixed !important;
   top: var(--navbar-h, 50px) !important;
@@ -13096,26 +13097,21 @@ body.layout-modern .tag-ac-input {
   transition: right 0.3s ease-in-out;
 }
 
-  @media (min-width: 1200px) {
+/* Desktop: 300px reserved space (both layouts) */
+@media (min-width: 1000px) {
   body:not(.sidebar-right-hidden) .messages-convo-page {
     right: 300px !important;
   }
-    body.layout-modern:not(.sidebar-right-hidden) .messages-convo-page {
+}
-      right: 400px !important;
+
+/* Attached Mobile: mobile sidebar width reserved space */
+@media (min-width: 600px) and (max-width: 999px) {
+  body:not(.sidebar-right-hidden) .messages-convo-page {
+    right: min(280px, 80vw) !important;
   }
 }
 
-  /* Kill the layout-legacy pagewrapper min-height:100vh that causes body overflow */
+/* Kill the pagewrapper min-height and overflow so body doesn't scroll behind it */
-  body:has(.messages-convo-page) .pagewrapper {
-    min-height: 0 !important;
-    overflow: hidden;
-  }
-}
-
-/* ── MOBILE (≤ 768px): position:fixed pagewrapper ─────────
-   Works on mobile; locks the pagewrapper to the viewport. */
-@media (max-width: 768px) {
-
 html:has(.messages-convo-page),
 body:has(.messages-convo-page) {
   height: 100%;
@@ -13123,16 +13119,9 @@ body.layout-modern .tag-ac-input {
 }
 
 body:has(.messages-convo-page) .pagewrapper {
-    position: fixed;
+  min-height: 0 !important;
-    top: var(--navbar-h, 50px);
-    left: 0;
-    right: 0;
-    bottom: 0;
   overflow: hidden;
-    padding: 0;
+  padding: 0 !important;
-    display: flex;
-    flex-direction: column;
-  }
 }
 
 /* ── Shared: convo pane is a flex column ──────────────────
@@ -13142,7 +13131,8 @@ body.layout-modern .tag-ac-input {
   overflow: hidden;
   padding: 0;
   max-width: 720px;
-  width: 100%;
+  /* Removed width: 100% here because it overconstrains the fixed element 
+     against left:0 and right:300px, causing negative margins and overlap. */
   margin: 0 auto;
   display: flex;
   flex-direction: column;

public/s/css/meme-creator.css

@@ -13,8 +13,9 @@
 /* Meme Creator Styles */
 
 .meme-creator-container {
+    box-sizing: border-box !important;
     padding: 20px;
-    max-width: 1200px;
+    max-width: 100%;
     width: 100%;
     margin: 0 auto;
     position: relative;
@@ -238,22 +239,49 @@ canvas#memeCanvas {
     color: var(--white, #fff);
 }
 
-/* Mobile Stacking - Simple 2-Row Layout */
+/* Mobile Stacking - Clean Flexbox Column Layout */
 @media (max-width: 950px) {
     .meme-editor-layout {
-        display: grid !important;
+        display: flex !important;
-        grid-template-columns: 1fr !important;
+        flex-direction: column !important;
-        grid-template-rows: 0.6fr auto !important;
+        align-items: center !important;
         gap: 20px;
     }
     .meme-controls {
+        box-sizing: border-box !important;
         width: 100% !important;
-        grid-row: 2;
+        max-width: 100% !important;
         overflow: visible !important;
     }
     .canvas-wrapper {
+        box-sizing: border-box !important;
         width: 100% !important;
-        grid-row: 1;
+        max-width: 100% !important;
+        margin-bottom: 10px;
+        overflow: visible !important;
+        height: auto !important;
+    }
+}
+
+/* Stack early when sidebar is open (sidebar is 300px, so 950 + 300 = 1250px)
+   This prevents the canvas from shrinking too much when the sidebar takes space. */
+@media (max-width: 1250px) {
+    body:not(.sidebar-right-hidden) .meme-editor-layout {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        gap: 20px;
+    }
+    body:not(.sidebar-right-hidden) .meme-controls {
+        box-sizing: border-box !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        overflow: visible !important;
+    }
+    body:not(.sidebar-right-hidden) .canvas-wrapper {
+        box-sizing: border-box !important;
+        width: 100% !important;
+        max-width: 100% !important;
         margin-bottom: 10px;
         overflow: visible !important;
         height: auto !important;
@@ -294,20 +322,19 @@ canvas#memeCanvas {
 
 /* Sidebar space reservation for meme pages */
 .meme-layout-wrapper {
+    box-sizing: border-box !important;
     width: 100%;
-    transition: padding-right 0.3s ease-in-out;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1000px) {
     /* Reserve space for the fixed sidebar so content doesn't flow behind it */
-    .meme-layout-wrapper {
+    body:not(.sidebar-right-hidden) .meme-layout-wrapper {
         padding-right: 300px;
     }
+}
 
 /* Collapse reserved space when sidebar is hidden */
 body.sidebar-right-hidden .meme-layout-wrapper {
-        padding-right: 0;
+    padding-right: 0 !important;
-    }
 }
 
-

public/s/js/f0ckm.js

@@ -6711,10 +6711,12 @@ window.cancelAnimFrame = (function () {
     // get 300px snapped, making the grid 600px too narrow, then jumping back on settle).
     const hasDedicatedWrapper = !!(
       document.querySelector('.index-layout-wrapper') ||
-      document.querySelector('.item-layout-container')
+      document.querySelector('.item-layout-container') ||
+      document.querySelector('.meme-layout-wrapper') ||
+      document.querySelector('.messages-convo-page')
     );
     const sel = hasDedicatedWrapper
-      ? '.index-layout-wrapper, .pagination-container-fluid'
+      ? '.index-layout-wrapper, .meme-layout-wrapper, .messages-convo-page, .pagination-container-fluid'
       : '.pagination-container-fluid, .pagewrapper';
     return document.querySelectorAll(sel);
   };
@@ -6737,9 +6739,15 @@ window.cancelAnimFrame = (function () {
     if (animateWrappers) {
       wrappers.forEach(w => {
         const isPagination = w.classList.contains('pagination-container-fluid');
-        const prop = isPagination ? 'right' : 'padding-right';
+        const isMessages = w.classList.contains('messages-convo-page');
+        
+        const prop = (isPagination || isMessages) ? 'right' : 'padding-right';
         const targetVal = isHidden ? sidebarWidth + 'px' : '0px';
-        w.style.setProperty('transition', isPagination ? `${prop} 0.3s ease-in-out` : 'none', 'important');
+        
+        // Lightweight layouts (pagination, messages) animate smoothly.
+        // Heavy/reflow-intensive layouts snap instantly to avoid reflow lag.
+        const shouldAnimate = (isPagination || isMessages);
+        w.style.setProperty('transition', shouldAnimate ? `${prop} 0.3s ease-in-out` : 'none', 'important');
         w.style.setProperty(prop, targetVal, 'important');
       });
       void sidebar.offsetWidth; // settle layout before sidebar transform begins

views/meme-creator.html

@@ -8,7 +8,7 @@
                 .meme-title { font-family: 'Impact', 'VCR', sans-serif; }
                 
                 /* NUCLEAR VISIBILITY RESET: Override any and all parent constraints for this page */
-                @media (max-width: 950px) {
+                @media (max-width: 1250px) {
                     /* Target all possible shell triggers */
                     html, body, .pagewrapper, #main, .layout-modern react-wrapper, .layout-legacy react-wrapper { 
                         height: auto !important;