Style and flow nudges

apps/database-new/app/[thread_id]/[message_id]/Messages.tsx

@@ -35,8 +35,8 @@ export const Messages = async ({ threadId }: { threadId: string }) => {
 
   return (
     <ScrollArea className="grow h-px">
-      <div className="flex flex-col py-2 xl:py-6">
-        <div className="flex flex-col py-2 xl:py-6">
+
+        <div className="flex flex-col mb-6 xl:mb-12">
           {userMessages.map((message, idx) => {
             const createdAtTimestamp = dayjs(message.createdAt)
             const isLatest = Array.isArray(messages) && idx === messages.length - 1
@@ -58,7 +58,7 @@ export const Messages = async ({ threadId }: { threadId: string }) => {
           })}
         </div>
         <BottomMarker />
-      </div>
+
     </ScrollArea>
   )
 }

apps/database-new/components/SchemaFlowHandler/SchemaFlow.utils.ts

@@ -131,7 +131,7 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
   const dagreGraph = new dagre.graphlib.Graph()
   dagreGraph.setDefaultEdgeLabel(() => ({}))
   dagreGraph.setGraph({
-    rankdir: 'LR',
+    rankdir: 'TB',
     align: 'UR',
     nodesep: 25,
     ranksep: 50,

apps/database-new/components/SchemaFlowHandler/index.tsx

@@ -46,7 +46,7 @@ const SchemaFlowHandler = ({ content }: SchemaGraphProps) => {
     getGraphDataFromTables(tables).then(({ nodes, edges }) => {
       reactFlowInstance.setNodes(nodes)
       reactFlowInstance.setEdges(edges)
-      setTimeout(() => reactFlowInstance.fitView({}), 50)
+      setTimeout(() => reactFlowInstance.fitView({minZoom: 1}), 50)
     })
   }, [tables, resolvedTheme, reactFlowInstance])