fix(dashboard): solve layout squishing and responsive collapsing by making lg breakpoints md and fixing overflow logic

Author: yash-pouranik

apps/web-dashboard/src/components/CollectionCreatorAgent.jsx

@@ -214,10 +214,10 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
   };
 
   return (
-    <div className="flex flex-col lg:flex-row gap-8 h-full w-full font-sans overflow-hidden">
+    <div className="flex flex-col md:flex-row gap-6 md:gap-8 min-h-[800px] md:min-h-0 md:h-full w-full font-sans overflow-hidden md:overflow-visible">
 
       {/* Open Chat Stream & Pinned Composer - Left */}
-      <div className="flex flex-col flex-1 h-full min-w-0 overflow-hidden relative">
+      <div className="flex flex-col flex-1 h-[400px] md:h-full min-w-0 overflow-hidden relative">
 
         {/* Messages Stream (Only this scrolls) */}
         <div 

apps/web-dashboard/src/pages/CreateCollection.jsx

@@ -168,11 +168,11 @@ function CreateCollection() {
 
     return (
         <div 
-            className="w-full flex-1 flex flex-col min-h-0 overflow-hidden box-border p-6 lg:p-8"
+            className="w-full flex-1 flex flex-col min-h-0 overflow-y-auto overflow-x-hidden box-border p-6 lg:p-8"
         >
             {/* Top Navigation & Mode Switch Header (Pinned, Non-overlapping) */}
             <div 
-                className="flex items-center justify-between pb-3.5 mb-3.5 border-b border-[var(--color-border)] flex-shrink-0 gap-6"
+                className="flex flex-wrap items-center justify-between pb-3.5 mb-3.5 border-b border-[var(--color-border)] flex-shrink-0 gap-6"
             >
                 <div className="flex items-center gap-3.5">
                     <button
@@ -202,9 +202,8 @@ function CreateCollection() {
                 )}
             </div>
 
-            {/* Main Area */}
             {mode === 'manual' ? (
-                <div className="flex-1 overflow-y-auto custom-scrollbar max-w-4xl mx-auto w-full py-4">
+                <div className="flex-1 overflow-y-auto custom-scrollbar max-w-6xl mx-auto w-full py-4">
                     <div className="bg-[var(--color-bg-card)] border border-[var(--color-border)] rounded-xl p-6 shadow-sm">
                         <div className="form-group mb-6">
                             <label className="form-label text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider mb-1.5 block">