refactor layout

src/index.css

@@ -48,6 +48,32 @@ textarea::placeholder {
   --color-desc: #8c90a3;
 }
 
+:root {
+  /* App shell — keep Header / Sidebar / AppLayout in sync */
+  --layout-frame: 1rem;
+  --layout-sidebar-width: 240px;
+  /* Sidebar width + frame gap (was 269px ≈ 29px gutter — felt too wide) */
+  --layout-main-offset: calc(var(--layout-sidebar-width) + var(--layout-frame));
+  --layout-header-height: 3rem;
+  --layout-header-height-xl: 4rem;
+  --layout-header-stack: calc(var(--layout-header-height) + 0.75rem);
+  --layout-header-stack-xl: calc(var(--layout-header-height-xl) + 1rem);
+  --layout-content-pad-x: 1rem;
+}
+
+.app-main {
+  scrollbar-gutter: stable;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 tbody tr:nth-child(odd) {
   background-color: #f5f7fc;
 }

src/router/MainRouter.tsx

@@ -1,8 +1,7 @@
 import { type FC } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
 import Home from "../pages/home/Home";
-import SideBar from "../shared/Sidebar";
+import AppLayout from "../shared/AppLayout";
-import Header from "../shared/Header";
 import { Paths } from "@/config/Paths";
 import ProformaInvoice from "@/pages/invoice/ProformaInvoice";
 import CreateInvoice from "@/pages/invoice/Create";
@@ -72,14 +71,7 @@ const MainRouter: FC = () => {
     }
 
     return (
-        <div className="p-4 overflow-hidden">
+        <AppLayout>
-            <Header />
-            <SideBar />
-            <div className="flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]">
-                <div
-                    className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}
-                >
-                    <div className="xl:pb-20 pb-32">
             <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path={Paths.home} element={<Home />} />
@@ -138,7 +130,6 @@ const MainRouter: FC = () => {
                 <Route path={Paths.features.create} element={<CreateFeature />} />
                 <Route path={Paths.service.print} element={<PrintService />} />
 
-
                 <Route path={Paths.announcement.list} element={<AnnouncementList />} />
                 <Route path={Paths.announcement.detail + ":id"} element={<AnnouncementUpdate />} />
                 <Route path={Paths.announcement.create} element={<AnnouncementCreate />} />
@@ -150,10 +141,7 @@ const MainRouter: FC = () => {
                 <Route path={Paths.learning.create} element={<LearningCreate />} />
                 <Route path={Paths.learning.category} element={<LearningCategory />} />
             </Routes>
-                    </div>
+        </AppLayout>
-                </div>
-            </div>
-        </div>
     );
 };
 

src/shared/AppLayout.tsx

@@ -0,0 +1,30 @@
+import { type FC, type ReactNode } from 'react'
+import Header from './Header'
+import SideBar from './Sidebar'
+
+type AppLayoutProps = {
+  children: ReactNode
+}
+
+/**
+ * Authenticated app shell: fixed header + sidebar, one scrollable main column.
+ * Horizontal padding on the scrollport keeps content clear of the RTL scrollbar.
+ */
+const AppLayout: FC<AppLayoutProps> = ({ children }) => {
+  return (
+    <div className="box-border flex h-dvh flex-col overflow-hidden p-[var(--layout-frame)]">
+      <Header />
+      <SideBar />
+
+      <div className="flex min-h-0 flex-1 flex-col pt-[var(--layout-header-stack)] xl:ms-[var(--layout-main-offset)] xl:pt-[var(--layout-header-stack-xl)]">
+        <main className="app-main min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          <div className="min-w-0 px-[var(--layout-content-pad-x)] pb-28 xl:pb-16">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default AppLayout

src/shared/Header.tsx

@@ -28,7 +28,7 @@ const Header: FC = () => {
     }, [location.pathname]);
 
     return (
-        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
+        <div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>
 
             <div className='min-w-[270px] hidden xl:block'>
                 <Input

src/shared/Sidebar.tsx

@@ -48,17 +48,17 @@ const SideBar: FC = () => {
       )}
       <div
         className={clx(
-          'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[240px] bg-white flex-col py-12',
+          'fixed right-0 top-0 bottom-0 flex w-[var(--layout-sidebar-width)] translate-x-[400px] flex-col overflow-hidden bg-white py-12 opacity-0 invisible transition-all ease-in-out xl:right-[var(--layout-frame)] xl:top-[var(--layout-frame)] xl:bottom-[var(--layout-frame)] xl:z-40 xl:translate-x-0 xl:rounded-[32px] xl:opacity-100 xl:visible',
-          openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
+          openSidebar && 'visible z-40 flex translate-x-0 opacity-100'
         )}
       >
-        <div className="px-6">
+        <div className="shrink-0 px-6">
           <div className="flex border-b-2 border-[#F5F7FC] pb-10">
             <img src={LogoImage} className="w-[120px]" />
           </div>
         </div>
 
-        <div className="flex-1 h-full overflow-y-auto no-scrollbar px-6">
+        <div className="min-h-0 flex-1 overflow-y-auto no-scrollbar px-6">
           <div className="mt-10 text-description px-6 text-header text-sm font-bold">{t('sidebar.menu')}</div>
 
           <div className="mt-3">