From 3a77c6d7fad51e06a860328c7730ce62c0db989b Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Fri, 16 Jan 2026 22:26:43 -0500 Subject: [PATCH 1/3] Fix sidebar gap when scrolling on pages with tall content The sidebar was showing a visible gap at the bottom when scrolling on pages with tall tables (e.g., /checks). This occurred because the parent container's overflow-x: hidden was breaking sticky positioning. Changes: - Changed sidebar from position: sticky to position: fixed - Added a spacer Box element to maintain layout spacing - Moved border and background styles to the sidebar component - Cleaned up unused CSS selectors --- .../Components/v1/Layouts/HomeLayout/index.css | 10 +--------- .../Components/v1/Layouts/HomeLayout/index.jsx | 16 ++++++++++++++-- client/src/Components/v1/Sidebar/index.jsx | 7 +++++-- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/client/src/Components/v1/Layouts/HomeLayout/index.css b/client/src/Components/v1/Layouts/HomeLayout/index.css index 953a2c682..61808aa57 100644 --- a/client/src/Components/v1/Layouts/HomeLayout/index.css +++ b/client/src/Components/v1/Layouts/HomeLayout/index.css @@ -14,15 +14,7 @@ } } */ -/* .home-layout aside { - position: sticky; - top: 0; - left: 0; - height: 100vh; - max-width: var(--env-var-side-bar-width); -} */ - -.home-layout > div { +.home-layout > .home-content-wrapper { min-height: calc(100vh - var(--env-var-spacing-2) * 2); flex: 1; } diff --git a/client/src/Components/v1/Layouts/HomeLayout/index.jsx b/client/src/Components/v1/Layouts/HomeLayout/index.jsx index 3e63aff37..825157333 100644 --- a/client/src/Components/v1/Layouts/HomeLayout/index.jsx +++ b/client/src/Components/v1/Layouts/HomeLayout/index.jsx @@ -1,17 +1,29 @@ import Sidebar from "../../Sidebar/index.jsx"; import { Outlet } from "react-router"; -import { Stack } from "@mui/material"; +import { Box, Stack } from "@mui/material"; +import { useSelector } from "react-redux"; import "./index.css"; const HomeLayout = () => { + const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false); + return ( + {/* Spacer for fixed sidebar */} + diff --git a/client/src/Components/v1/Sidebar/index.jsx b/client/src/Components/v1/Sidebar/index.jsx index b66f081fb..f39121987 100644 --- a/client/src/Components/v1/Sidebar/index.jsx +++ b/client/src/Components/v1/Sidebar/index.jsx @@ -81,14 +81,17 @@ const Sidebar = () => { : "var(--env-var-side-bar-width)" } component="aside" - position="sticky" + position="fixed" top={0} - borderRight={`1px solid ${theme.palette.primary.lowContrast}`} + left={0} paddingTop={theme.spacing(6)} paddingBottom={theme.spacing(6)} gap={theme.spacing(6)} sx={{ transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)", + backgroundColor: "#000000", + borderRight: "1px solid #344054", + zIndex: 1000, }} > From a4cf53ee1549f510787d71d0233e99f517a19022 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Fri, 16 Jan 2026 22:52:11 -0500 Subject: [PATCH 2/3] Set html/body background to black and disable overscroll bounce - Added background-color: #000000 to prevent white flash on overscroll - Added overscroll-behavior: none to disable elastic bounce effect --- client/src/index.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/src/index.css b/client/src/index.css index d58a7e872..b29c17960 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -4,6 +4,12 @@ box-sizing: border-box; } +html, +body { + background-color: #000000; + overscroll-behavior: none; +} + html { scroll-behavior: smooth; } From 487f6b222d7ad0e919435348f21eb24067f6def6 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Sun, 18 Jan 2026 14:11:05 -0500 Subject: [PATCH 3/3] refactor: extract sidebar width logic into useSidebar hook Create shared useSidebar hook to centralize sidebar width and transition logic, addressing code review feedback about duplicated logic between Sidebar and HomeLayout components. Changes: - Add useSidebar hook with collapsed state, width, and transition values - Update Sidebar to use the hook instead of inline selectors and values - Update HomeLayout to use the hook for spacer element styling This ensures sidebar width logic is defined in one place and stays in sync. --- .../v1/Layouts/HomeLayout/index.jsx | 10 +++---- client/src/Components/v1/Sidebar/index.jsx | 13 +++------ client/src/Hooks/useSidebar.js | 29 +++++++++++++++++++ 3 files changed, 37 insertions(+), 15 deletions(-) create mode 100644 client/src/Hooks/useSidebar.js diff --git a/client/src/Components/v1/Layouts/HomeLayout/index.jsx b/client/src/Components/v1/Layouts/HomeLayout/index.jsx index 825157333..b078fe048 100644 --- a/client/src/Components/v1/Layouts/HomeLayout/index.jsx +++ b/client/src/Components/v1/Layouts/HomeLayout/index.jsx @@ -1,12 +1,12 @@ import Sidebar from "../../Sidebar/index.jsx"; import { Outlet } from "react-router"; import { Box, Stack } from "@mui/material"; -import { useSelector } from "react-redux"; +import { useSidebar } from "@/Hooks/useSidebar.js"; import "./index.css"; const HomeLayout = () => { - const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false); + const { width, transition } = useSidebar(); return ( { {/* Spacer for fixed sidebar */} diff --git a/client/src/Components/v1/Sidebar/index.jsx b/client/src/Components/v1/Sidebar/index.jsx index f39121987..06caede5a 100644 --- a/client/src/Components/v1/Sidebar/index.jsx +++ b/client/src/Components/v1/Sidebar/index.jsx @@ -12,9 +12,9 @@ import Icon from "../Icon"; // Utils import { useTheme } from "@mui/material/styles"; -import { useSelector } from "react-redux"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router"; +import { useSidebar } from "@/Hooks/useSidebar.js"; const URL_MAP = { support: "https://discord.com/invite/NAb6H3UTjK", @@ -65,8 +65,7 @@ const Sidebar = () => { const theme = useTheme(); const { t } = useTranslation(); const navigate = useNavigate(); - // Redux state - const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false); + const { collapsed, width, transition } = useSidebar(); const menu = getMenu(t); const otherMenuItems = getOtherMenuItems(t); @@ -75,11 +74,7 @@ const Sidebar = () => { return ( { paddingBottom={theme.spacing(6)} gap={theme.spacing(6)} sx={{ - transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)", + transition, backgroundColor: "#000000", borderRight: "1px solid #344054", zIndex: 1000, diff --git a/client/src/Hooks/useSidebar.js b/client/src/Hooks/useSidebar.js new file mode 100644 index 000000000..97724b417 --- /dev/null +++ b/client/src/Hooks/useSidebar.js @@ -0,0 +1,29 @@ +import { useSelector } from "react-redux"; + +// CSS variable names for sidebar widths +const SIDEBAR_WIDTH_VAR = "var(--env-var-side-bar-width)"; +const SIDEBAR_COLLAPSED_WIDTH_VAR = "var(--env-var-side-bar-collapsed-width)"; + +// Transition timing for sidebar width changes +const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)"; + +/** + * Hook to get sidebar state and computed width + * Centralizes sidebar width logic to avoid duplication between Sidebar and HomeLayout + * + * @returns {Object} Sidebar state and styles + * @returns {boolean} collapsed - Whether the sidebar is collapsed + * @returns {string} width - CSS width value based on collapsed state + * @returns {string} transition - CSS transition for width changes + */ +export const useSidebar = () => { + const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false); + + return { + collapsed, + width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR, + transition: SIDEBAR_TRANSITION, + }; +}; + +export default useSidebar;