fix(databases): move table metadata to the bottom of the table viewer

vibn-frontend/components/project/table-viewer.tsx

@@ -106,14 +106,6 @@ export function TableViewer({ projectId, dbUuid, schema, table }: Props) {
 
   return (
     <div style={wrap}>
-      <div style={meta}>
-        Showing {data.rows.length} row{data.rows.length === 1 ? "" : "s"}
-        {data.truncated && " (truncated to first 50)"} · {data.columns.length}{" "}
-        column{data.columns.length === 1 ? "" : "s"} ·{" "}
-        <code style={qual}>
-          {schema}.{table}
-        </code>
-      </div>
       <div style={tableScroll}>
         <table style={tableEl}>
           <thead>
@@ -138,6 +130,14 @@ export function TableViewer({ projectId, dbUuid, schema, table }: Props) {
           </tbody>
         </table>
       </div>
+      <div style={meta}>
+        Showing {data.rows.length} row{data.rows.length === 1 ? "" : "s"}
+        {data.truncated && " (truncated to first 50)"} · {data.columns.length}{" "}
+        column{data.columns.length === 1 ? "" : "s"} ·{" "}
+        <code style={qual}>
+          {schema}.{table}
+        </code>
+      </div>
     </div>
   );
 }
@@ -160,8 +160,11 @@ const wrap: React.CSSProperties = {
   flex: 1,
 };
 const meta: React.CSSProperties = {
-  fontSize: "0.74rem",
+  fontSize: "0.75rem",
   color: INK.mid,
+  display: "flex",
+  justifyContent: "space-between",
+  padding: "4px 8px",
 };
 const qual: React.CSSProperties = {
   fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",