better structure for main body

packages/frontend/src/Index.tsx

@@ -295,9 +295,8 @@ function Index() {
             </div>
 
             {/* main body */}
-            <div className={`w-full h-full flex items-start justify-between gap-${BREATHING_ROOM}`}>
             {selectedProject && issues.length > 0 && (
-                    <ResizablePanelGroup>
+                <ResizablePanelGroup className={`flex-1`}>
                     <ResizablePanel id={"left"} minSize={400}>
                         {/* issues list (table) */}
                         <IssuesTable
@@ -315,12 +314,7 @@ function Index() {
                     {selectedIssue && selectedOrganisation && (
                         <>
                             <ResizableSeparator />
-                                <ResizablePanel
+                            <ResizablePanel id={"right"} defaultSize={"30%"} minSize={360} maxSize={"60%"}>
-                                    id={"right"}
-                                    defaultSize={"30%"}
-                                    minSize={360}
-                                    maxSize={"60%"}
-                                >
                                 <div className="border">
                                     <IssueDetailPane
                                         project={selectedProject}
@@ -335,7 +329,6 @@ function Index() {
                     )}
                 </ResizablePanelGroup>
             )}
-            </div>
 
             {/* <LogOutButton /> */}
         </main>