Add DMProvider to App component and adjust Messages layout for better responsiveness

src/App.tsx

@@ -12,6 +12,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { NostrLoginProvider } from '@nostrify/react/login';
 import { AppProvider } from '@/components/AppProvider';
 import { NWCProvider } from '@/contexts/NWCContext';
+import { DMProvider } from '@/components/DMProvider';
 import { AppConfig } from '@/contexts/AppContext';
 import AppRouter from './AppRouter';
 
@@ -52,12 +53,14 @@ export function App() {
             <NostrProvider>
               <NostrSync />
               <NWCProvider>
-                <TooltipProvider>
-                  <Toaster />
-                  <Suspense>
-                    <AppRouter />
-                  </Suspense>
-                </TooltipProvider>
+                <DMProvider config={{ enabled: true }}>
+                  <TooltipProvider>
+                    <Toaster />
+                    <Suspense>
+                      <AppRouter />
+                    </Suspense>
+                  </TooltipProvider>
+                </DMProvider>
               </NWCProvider>
             </NostrProvider>
           </NostrLoginProvider>

src/pages/Messages.tsx

@@ -10,7 +10,7 @@ const Messages = () => {
 
   return (
     <Layout>
-      <div className="container mx-auto p-4 h-full flex flex-col">
+      <div className="container mx-auto p-4 h-[calc(100vh-10rem)] flex flex-col">
         <DMMessagingInterface className="flex-1" />
       </div>
     </Layout>