fix(codebase): connect the code tree container and preview container like in reference image

vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx

@@ -58,6 +58,15 @@ export default function CodeTab() {
     >
       <div style={{ maxWidth: 1400, margin: "0 auto" }}>
         <PageHeader title="Codebase" />
+        <Card
+          padding={0}
+          style={{
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "calc(100vh - 150px)",
+          }}
+        >
           <div style={grid}>
             {/* ── Left rail ── */}
             <section style={leftCol}>
@@ -117,8 +126,17 @@ export default function CodeTab() {
                     )}
                     {codebases?.map((cb) => {
                       return (
-                      <article key={cb.id} style={codebaseTile}>
-                        <div style={tileHeader}>
+                        <article
+                          key={cb.id}
+                          style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                          }}
+                        >
+                          <div
+                            style={{ ...tileHeader, padding: "20px 24px 12px" }}
+                          >
                             <span style={chevronCell}>
                               <ChevronDown
                                 size={13}
@@ -126,15 +144,23 @@ export default function CodeTab() {
                               />
                             </span>
                             <Box
-                            size={13}
+                              size={14}
                               style={{ color: THEME.mid, flexShrink: 0 }}
                             />
                             <div style={{ minWidth: 0, textAlign: "left" }}>
-                            <div style={tileLabel}>{cb.label}</div>
+                              <div
+                                style={{
+                                  fontSize: "0.95rem",
+                                  fontWeight: 600,
+                                  color: THEME.ink,
+                                }}
+                              >
+                                {cb.label}
+                              </div>
                               {cb.hint && <div style={tileHint}>{cb.hint}</div>}
                             </div>
                           </div>
-                        <div style={tileBody}>
+                          <div style={{ padding: "0 10px 24px 10px" }}>
                             <GiteaFileTree
                               projectId={projectId}
                               rootPath={cb.path}
@@ -163,17 +189,18 @@ export default function CodeTab() {
 
             {/* ── Right pane ── */}
             <aside style={rightCol}>
-            <Card
-              padding={0}
+              <div
                 style={{
                   flex: 1,
-                minHeight: "calc(100vh - 150px)",
                   display: "flex",
                   flexDirection: "column",
                 }}
               >
                 {selection?.type === "file" && (
-                <GiteaFileViewer projectId={projectId} path={selection.path} />
+                  <GiteaFileViewer
+                    projectId={projectId}
+                    path={selection.path}
+                  />
                 )}
                 {!selection && (
                   <div
@@ -191,9 +218,10 @@ export default function CodeTab() {
                     Pick a codebase file on the left.
                   </div>
                 )}
-            </Card>
+              </div>
             </aside>
           </div>
+        </Card>
       </div>
     </div>
   );
@@ -326,18 +354,19 @@ const pageWrap: React.CSSProperties = {
 };
 const grid: React.CSSProperties = {
   display: "grid",
-  gridTemplateColumns: "minmax(280px, 360px) minmax(0, 1fr)",
-  gap: 28,
-  maxWidth: 1400,
-  margin: "0 auto",
+  gridTemplateColumns: "300px minmax(0, 1fr)",
   alignItems: "stretch",
 };
+
 const leftCol: React.CSSProperties = {
   minWidth: 0,
   display: "flex",
   flexDirection: "column",
-  gap: 18,
+  gap: 24,
+  borderRight: `1px solid ${THEME.borderSoft}`,
+  paddingRight: 24,
 };
+
 const rightCol: React.CSSProperties = {
   minWidth: 0,
   display: "flex",