showing up selection of convo on side

packages/desktop/src/index.css

@@ -3,6 +3,10 @@ body {
     Arial, sans-serif;
 }
 
+#root {
+  padding: 0 !important;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/desktop/src/pages/Home/index.tsx

@@ -4,6 +4,7 @@ import { $searchQuery } from "../../controller/recoil";
 import Conversations from "./conversations";
 import Header from "./header";
 import Search from "./search";
+import SelectedConversation from "./selectedConversation";
 import { useEffect } from "react";
 import { useGetUserDetails } from "../../controller/";
 import { useRecoilValue } from "recoil";
@@ -13,11 +14,17 @@ export default function Home() {
   const searchQuery = useRecoilValue($searchQuery);
 
   return (
-    <div className="h-screen w-full bg-slate-700">
+    <div className="h-screen bg-slate-700 flex flex-row">
-      {/* header */}
+      <div className="flex-1">
-      <Header />
+        {/* header */}
+        <Header />
 
-      {searchQuery ? <Search /> : <Conversations />}
+        {/*  main content */}
+
+        {searchQuery ? <Search /> : <Conversations />}
+      </div>
+
+      <SelectedConversation />
     </div>
   );
 }

packages/desktop/src/pages/Home/selectedConversation/index.tsx

@@ -15,5 +15,7 @@ export default function SelectedConversation() {
    * all messages between me and them
    */
 
-  return <span>this is the selected conversation</span>;
+  return (
+    <div className="bg-slate-800 flex-1">this is the selected conversation</div>
+  );
 }