feat: resolved copilot and modal conflicts

Author: VishalPawar1010

src/app/App.tsx

@@ -319,9 +319,9 @@ export function App(): React.JSX.Element {
         </div>
 
         {/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */}
-        <div className="copilot-container">
-        <CopilotChat />
-        </div>
+       
+            <CopilotChat />
+       
       </div>
     </>
   );

src/app/components/Asset/Modal.tsx

@@ -4,8 +4,8 @@ const Modal = ({  onClose, asset }) => {
   if (!asset) return null;
 
   return (
-    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <div style={{ padding: 20, background: 'white', borderRadius: 5, width: '50%', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
+    <div style={{ zIndex:1000, position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ zIndex:1005, padding: 20, background: 'white', borderRadius: 5, width: '50%', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
         <h2>Snippet Details</h2>
         <p>ID: {asset.id}</p>
         <p>Name: {asset.name}</p>

src/app/components/Copilot/Copilot.css

@@ -1,4 +1,15 @@
 /* Container styles */
+.copilot-container {
+  border: 2px solid black;
+  background-color: #0e1111;
+  height: 600px;
+  padding: 20px;
+  border-radius: 9px;
+  display: flex;
+  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
+  margin-top: 20px;
+}
+
 .container {
     width: -webkit-fill-available;
   }

src/app/components/Copilot/Copilot.tsx

@@ -128,6 +128,7 @@ export function CopilotChat(): React.JSX.Element {
   }, []);
 
   return (
+    <div className="copilot-container">
     <div className="container">
       <div className="header">
         <div>
@@ -152,5 +153,6 @@ export function CopilotChat(): React.JSX.Element {
         </div>
       </div>
     </div>
+    </div>
   );
 }

src/app/global.css

@@ -203,16 +203,7 @@ html {
   flex-direction: column;
 }
 
-.copilot-container {
-  border: 2px solid black;
-  background-color: #0e1111;
-  height: 600px;
-  padding: 20px;
-  border-radius: 9px;
-  display: flex;
-  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
-  margin-top: 20px;
-}
+
 
 
 /* Common styles for the response formatting body */