From f2ad9ce9f14ff415487fe75ac7cf4de8ac264d9a Mon Sep 17 00:00:00 2001
From: glaubervila <glauber.vila.verde@gmail.com>
Date: Tue, 30 Jun 2026 14:56:59 -0300
Subject: [PATCH] improve layout

---
 .../src/containers/ClusterDetail/index.js     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/containers/ClusterDetail/index.js b/frontend/src/containers/ClusterDetail/index.js
index 9b5d625..94844f0 100644
--- a/frontend/src/containers/ClusterDetail/index.js
+++ b/frontend/src/containers/ClusterDetail/index.js
@@ -124,9 +124,10 @@ export default function ClusterDetailContainer({ catalog, record }) {
   }, [selectedMember]);
 
   return (
-    <Grid container spacing={2} sx={{ height: '100%' }}>
-      <Grid size={{ md: 6 }} sx={{ height: 500 }}>
-        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 2 }}>
+      <Grid container spacing={2}>
+      <Grid size={{ md: 6 }} sx={{ height: 600 }}>
+        <Paper elevation={3} sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <Tabs value={activeTab} onChange={(_, v) => setActiveTab(v)}>
             <Tab label="Members" />
             <Tab label="Properties" />
@@ -157,11 +158,12 @@ export default function ClusterDetailContainer({ catalog, record }) {
           <TabPanel value={activeTab} index={1}>
             <TargetProperties record={record} />
           </TabPanel>
-        </Box>
+        </Paper>
       </Grid>
 
-      <Grid size={{ md: 6 }} sx={{ height: 500 }}>
-        <Box
+      <Grid size={{ md: 6 }} sx={{ height: 600 }}>
+        <Paper
+          elevation={3}
           sx={{
             display: 'flex',
             flexDirection: 'row',
@@ -214,14 +216,12 @@ export default function ClusterDetailContainer({ catalog, record }) {
               </IconButton>
             </Tooltip>
           </Toolbar>
-        </Box>
+        </Paper>
       </Grid>
 
-      <Grid size={{ md: 12 }}>
-        {/* TODO: add Jupyter Notebook integration */}
-        <Box />
       </Grid>
-    </Grid>
+      <Paper elevation={3} sx={{ flex: 1 }} />
+    </Box>
   );
 
 }