fix: Sidebar stick to left. Fit content for different desktop viewports

apps/backoffice/src/app/accounts/layout.tsx

@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+      <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mr-auto">
           <Outlet />
         </div>
       </div>

apps/backoffice/src/app/dashboard/layout.tsx

@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+      <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mr-auto">
           <Outlet />
         </div>
       </div>

apps/backoffice/src/app/dashboard/page.tsx

@@ -101,7 +101,7 @@ export const Components: FC = (): ReactElement => {
         <img
           src="gacha.png"
           alt=""
-          className="rounded-lg min-w-[436px] h-auto object-cover"
+          className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
         />
       </div>
     </main>

apps/backoffice/src/app/transactions/layout.tsx

@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+      <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mr-auto">
           <Outlet />
         </div>
       </div>

libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -14,7 +14,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
   const isActive = (path: string) => location.pathname.includes(path);
 
   return (
-    <aside className="w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
+    <aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
       <div className="flex flex-col gap-20 justify-between items-center">
         {/* Logo */}
         <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />