Small sidebar fix

src/components/app/AppLayout.tsx

@@ -12,6 +12,7 @@ import { Server, Message } from "@/types/types";
 import SidebarServers from "./SidebarServers";
 import SidebarDMs from "./SidebarDMs";
 import SidebarChannels from "./SidebarChannels";
+import DMItem from "./DMItem";
 
 export default function AppLayout({
   children,
@@ -70,10 +71,12 @@ export default function AppLayout({
           app.sidebarOpen && isMobile ? "w-5xl md:w-md" : "w-0 md:w-md"
         )}
       >
-        {/* Left column — servers */}
+        <div className="flex-shrink-0">
           <SidebarServers app={app} />
+        </div>
 
-        {/* Right column — DMs or server channels */}
+        <div className="flex-1 min-w-0 flex flex-col bg-sidebar">
+          <div className="flex-1 min-h-0">
             {server ? (
               <SidebarChannels server={server} />
             ) : (
@@ -81,6 +84,19 @@ export default function AppLayout({
             )}
           </div>
 
+          <footer className="mt-auto pb-3 px-3">
+            <DMItem
+              name={app.profile?.display_name || "Loading.."}
+              id={app.profile?.id || "me"}
+              avatar={app.profile?.avatar_url || ""}
+              status="online"
+              app={app}
+              settings
+            />
+          </footer>
+        </div>
+      </div>
+
       {app.sidebarOpen && isMobile ? (
         <div
           className="w-full h-full overflow-x-hidden"

src/components/app/SidebarDMs.tsx

@@ -76,7 +76,7 @@ export default function SidebarDMs({ app }: { app: App }) {
             <div className="px-3 py-2">
               <Button
                 variant="ghost"
-                className="w-full justify-start gap-2 text-sm"
+                className="w-full justify-start gap-2 text-sm truncate"
                 onClick={async () => {
                   const res = await axios.get("/api/profile", {
                     params: { username: query },
@@ -92,17 +92,6 @@ export default function SidebarDMs({ app }: { app: App }) {
           )}
         </div>
       </ScrollArea>
-
-      <footer className="mt-auto pb-3 px-3">
-        <DMItem
-          name={app.profile?.display_name || "Loading.."}
-          id={app.profile?.id || "me"}
-          avatar={app.profile?.avatar_url || ""}
-          status="online"
-          app={app}
-          settings
-        />
-      </footer>
     </div>
   );
 }