Optimize layout for large screens (> 1500px)

src/lib/components/ChatSidebar.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <aside
-  class="flex shrink-0 flex-col rounded-tl-xl bg-white transition-all duration-200
+  class="flex shrink-0 flex-col rounded-tl-xl min-[1540px]:rounded-tr-xl bg-white transition-all duration-200
 		{expanded ? 'w-[420px]' : 'w-80'}"
 >
   <div class="flex h-12 shrink-0 items-center justify-between px-4">

src/routes/+layout.svelte

@@ -21,7 +21,7 @@
   <link rel="icon" href={favicon} />
 </svelte:head>
 
-<div class="flex h-screen flex-col overflow-hidden bg-gray-100">
+<div class="flex h-screen flex-col overflow-hidden max-w-[1540px] mx-auto">
   <Navbar />
   <div class="flex flex-1 gap-5 overflow-hidden pt-2">
     <LeftSidebar {mode} {activeRoom} />

src/routes/layout.css

@@ -6,6 +6,10 @@ html {
   font-size: 16px;
 }
 
+body {
+  background-color: var(--color-gray-100);
+}
+
 @theme {
   --color-brand: #e32a6d;
   --color-brand-hover: #c4205a;