Web sidebar position fixed

FooterWrapper.tsx

@@ -1,17 +1,14 @@
 "use client";
 
 import Footer from "@/components/footer/Footer";
-import { SIDEBAR_WIDTHS } from "@/constants/sidebar";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import useDeviceInfo from "./hooks/useDeviceInfo";
-import { useSidebarController } from "./hooks/useSidebarController";
 
 export default function FooterWrapper() {
   const { isApp } = useDeviceInfo();
   const pathname = usePathname();
   const [homeActiveTab, setHomeActiveTab] = useState<string>("latest");
-  const { sidebarWidth, isMobile, isNarrow } = useSidebarController();
   useEffect(() => {
     const win = (globalThis as typeof globalThis & { window?: Window }).window;
     if (win === undefined) {
@@ -60,18 +57,5 @@ export default function FooterWrapper() {
 
   if (hideFooter) return null;
 
-  // App mode or small-screen web: no left-rail spacing
-  if (isApp || isMobile) return <Footer />;
-
-  // Desktop WebLayout: match main content's sidebar spacing
-  const sidebarSpacing = isNarrow ? SIDEBAR_WIDTHS.COLLAPSED : sidebarWidth;
-
-  return (
-    <div
-      className="tw-w-full tw-max-w-[82.75rem] tw-mx-auto"
-      style={{ paddingLeft: sidebarSpacing }}
-    >
-      <Footer />
-    </div>
-  );
+  return <Footer />;
 }

components/layout/WebLayout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { type ReactNode } from "react";
+import React, { type ReactNode, useMemo } from "react";
 import Image from "next/image";
 import WebSidebar from "./sidebar/WebSidebar";
 import { useSidebarController } from "../../hooks/useSidebarController";
@@ -27,16 +27,20 @@ const WebLayoutContent = ({ children, isSmall = false }: WebLayoutProps) => {
   } = useSidebarController();
   const { isRightSidebarOpen } = useSidebarState();
 
-  const cssVars: React.CSSProperties = {
-    ["--sidebar-width" as any]: sidebarWidth,
-    ["--collapsed-width" as any]: SIDEBAR_WIDTHS.COLLAPSED,
-    ["--expanded-width" as any]: SIDEBAR_WIDTHS.EXPANDED,
-    ["--layout-max" as any]: `${DESKTOP_MAX_WIDTH}px`,
-  };
+  const cssVars = useMemo(
+    () =>
+      ({
+        "--sidebar-width": sidebarWidth,
+        "--collapsed-width": SIDEBAR_WIDTHS.COLLAPSED,
+        "--expanded-width": SIDEBAR_WIDTHS.EXPANDED,
+        "--layout-max": `${DESKTOP_MAX_WIDTH}px`,
+      }) as React.CSSProperties,
+    [sidebarWidth]
+  );
 
   return (
     <div
-      className="layout-root tw-flex tw-relative tw-overflow-x-hidden tw-w-full"
+      className="layout-root tw-flex tw-justify-between tw-relative tw-overflow-x-hidden tw-w-full"
       style={cssVars}
       data-mobile={isMobile}
       data-narrow={isNarrow}

components/layout/sidebar/nav/WebSidebarSubmenu.tsx

@@ -118,7 +118,7 @@ function WebSidebarSubmenu({
     return createPortal(
       <div
         ref={containerRef}
-        className="tailwind-scope tw-fixed tw-z-[95] tw-ml-2 tw-w-64 tw-max-h-[65vh] tw-bg-iron-800 tw-border tw-border-solid tw-border-iron-700 tw-rounded-lg tw-shadow-[0_20px_45px_rgba(7,7,11,0.7)] tw-overflow-hidden tw-flex tw-flex-col"
+        className="tailwind-scope tw-fixed tw-z-[95] tw-w-64 tw-max-h-[65vh] tw-bg-iron-800 tw-border tw-border-solid tw-border-iron-700 tw-rounded-lg tw-shadow-[0_20px_45px_rgba(7,7,11,0.7)] tw-overflow-hidden tw-flex tw-flex-col"
         style={{
           left: leftStyle,
           top: topStyle,

components/providers/LayoutWrapper.tsx

@@ -67,12 +67,12 @@ export default function LayoutWrapper({
 
   let LayoutComponent: ComponentType<{ readonly children: ReactNode }> = WebLayout;
 
-  const shouldUseSmallScreenLayout =
+  const isSmallLayout =
     hasTouchScreen && (isSmallScreen || isTouchTabletViewport);
 
   if (isApp) {
     LayoutComponent = MobileLayout;
-  } else if (shouldUseSmallScreenLayout) {
+  } else if (isSmallLayout) {
     LayoutComponent = SmallScreenLayout;
   }
 
@@ -81,9 +81,11 @@ export default function LayoutWrapper({
   }
 
   return (
-    <>
-      <LayoutComponent>{children}</LayoutComponent>
-      <FooterWrapper />
-    </>
+    <LayoutComponent>
+      <>
+        {children}
+        <FooterWrapper />
+      </>
+    </LayoutComponent>
   );
 }

components/utils/sidebar/SidebarLayout.tsx

@@ -118,7 +118,7 @@ export default function SidebarLayout({
     <main className="tailwind-scope tw-bg-black tw-overflow-x-hidden">
       <div
         className={`tw-transition-all tw-duration-300 tw-ease-out ${
-          !open ? "tw-ml-2" : "tw-ml-[320px]"
+          !open ? "tw-ml-0" : "tw-ml-[320px]"
         }`}>
         <GroupsSidebarToggle
           ref={openButtonRef}

styles/globals.scss

@@ -18,7 +18,11 @@
     --collapsed-width: 0px;
     --expanded-width: 0px;
 
-    --layout-margin: max((100vw - var(--layout-max)) / 2, 0px);
+    --scrollbar-compensation: calc(100vw - 100%);
+    --layout-margin: max(
+      ((100vw - var(--layout-max)) - var(--scrollbar-compensation)) / 2,
+      0px
+    );
     --left-rail: calc(var(--layout-margin) + var(--sidebar-width));
   }
 
@@ -179,6 +183,10 @@
   display: none;
 }
 
+html {
+   scrollbar-gutter: stable both-edges;
+}
+
 body {
   background-color: #000000 !important;
   color: variables.$font-color !important;