enhance UI layout and responsiveness across pipelines

src/components/pipelines/FeatureExtraction.tsx

@@ -295,7 +295,8 @@ function FeatureExtraction() {
         </div>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
+
+      <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0 overflow-y-auto">
         {/* Left Panel - Examples */}
         <div className="lg:w-1/2 flex flex-col min-h-0">
           {/* Add Example */}
@@ -303,26 +304,27 @@ function FeatureExtraction() {
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Add Text Examples:
             </label>
-            <div className="flex flex-col sm:flex-row gap-2">
+            <div className="flex flex-row gap-2">
               <textarea
                 value={newExampleText}
                 onChange={(e) => setNewExampleText(e.target.value)}
                 onKeyPress={handleKeyPress}
                 placeholder="Enter text to get embeddings... (Press Enter to add)"
-                className="flex-1 p-3 border border-gray-300 rounded-lg resize-none focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed text-sm"
+                className="w-5/6 lg:w-full flex-1 p-3 border border-gray-300 rounded-lg resize-none focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed text-sm"
                 rows={2}
                 disabled={!hasBeenLoaded || isExtracting}
               />
               <button
                 onClick={handleAddExample}
                 disabled={!newExampleText.trim() || !hasBeenLoaded}
-                className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors self-start sm:self-stretch"
+                className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors self-stretch"
               >
                 <Plus className="w-4 h-4" />
               </button>
             </div>
           </div>
 
+
           {/* Extract Button */}
           {examples.some((ex) => !ex.embedding) && (
             <div className="mb-4">
@@ -344,8 +346,8 @@ function FeatureExtraction() {
             </div>
           )}
 
-          {/* Examples List */}
-          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white min-h-0 max-h-[35vh] sm:max-h-[40vh] lg:max-h-none">
+           {/* Examples List */}
+          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white min-h-12 max-h-[35vh] sm:max-h-[40vh] lg:max-h-none">
             <div className="p-4 h-full">
               <h3 className="text-sm font-medium text-gray-700 mb-3 sticky top-0 bg-white z-10">
                 Examples ({examples.length})
@@ -415,11 +417,11 @@ function FeatureExtraction() {
         {/* Right Panel - Visualization and Similarities */}
         <div className="lg:w-1/2 flex flex-col min-h-0">
           {showVisualization && (
-            <div className="mb-4">
+            <div className="mb-2">
               <h3 className="text-sm font-medium text-gray-700 mb-2">
                 2D Visualization
               </h3>
-              <div className="border border-gray-300 rounded-lg bg-white p-2 sm:p-4">
+              <div className="border border-gray-300 rounded-lg bg-white p-2 sm:p-4 ">
                 <svg
                   ref={chartRef}
                   width="100%"
@@ -532,7 +534,7 @@ function FeatureExtraction() {
           )}
 
           {/* Similarity Results */}
-          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white min-h-0 max-h-[35vh] sm:max-h-[40vh] lg:max-h-none">
+          <div className="flex-1 overflow-y-auto border border-gray-300 rounded-lg bg-white min-h-32 max-h-[35vh] sm:max-h-[40vh] lg:max-h-none">
             <div className="p-4 h-full">
               <h3 className="text-sm font-medium text-gray-700 mb-3 sticky top-0 bg-white z-10">
                 Cosine Similarities
@@ -560,8 +562,8 @@ function FeatureExtraction() {
                       sim.similarity > 0.8
                         ? 'text-green-600'
                         : sim.similarity > 0.5
-                          ? 'text-yellow-600'
-                          : 'text-red-500'
+                        ? 'text-yellow-600'
+                        : 'text-red-500'
 
                     return (
                       <div
@@ -585,8 +587,8 @@ function FeatureExtraction() {
                                 sim.similarity > 0.8
                                   ? 'bg-green-500'
                                   : sim.similarity > 0.5
-                                    ? 'bg-yellow-500'
-                                    : 'bg-red-500'
+                                  ? 'bg-yellow-500'
+                                  : 'bg-red-500'
                               }`}
                               style={{
                                 width: `${Math.max(sim.similarity * 100, 5)}%`

src/components/pipelines/ImageClassification.tsx

@@ -206,7 +206,7 @@ function ImageClassification() {
         </div>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
+      <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0  overflow-y-auto">
         {/* Left Panel - Image Upload and List */}
         <div className="lg:w-1/2 flex flex-col">
           {/* Upload Area */}
@@ -219,22 +219,27 @@ function ImageClassification() {
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
               onDrop={handleDrop}
-              className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer ${
+              className={`border-2 border-dashed rounded-lg p-3 lg:p-6 text-center transition-colors cursor-pointer ${
                 dragOver
                   ? 'border-blue-500 bg-blue-50'
                   : 'border-gray-300 hover:border-gray-400'
               } ${!hasBeenLoaded ? 'opacity-50 cursor-not-allowed' : ''}`}
               onClick={() => hasBeenLoaded && fileInputRef.current?.click()}
             >
-              <Upload className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-              <p className="text-sm text-gray-600">
-                {dragOver
-                  ? 'Drop images here'
-                  : 'Click to upload or drag and drop images'}
-              </p>
-              <p className="text-xs text-gray-500 mt-1">
+              <div className="flex flex-row lg:flex-col">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-gray-400" />
+                <div className='flex flex-col'>
+                <p className="text-sm text-gray-600">
+                  {dragOver
+                    ? 'Drop images here'
+                    : 'Click to upload or drag and drop images'}
+                </p>
+                <p className="text-xs text-gray-500 mt-1">
                 Supports JPG, PNG, GIF, WebP
               </p>
+              </div>
+              </div>
+              
               <input
                 ref={fileInputRef}
                 type="file"
@@ -350,12 +355,12 @@ function ImageClassification() {
               <h3 className="text-sm font-medium text-gray-700 mb-2">
                 Selected Image
               </h3>
-              <div className="sm:border-none border border-gray-300 rounded-lg bg-white p-4 sm:p-0">
+              <div className="border-none sm:border border-gray-300 rounded-lg bg-white p-4 sm:p-0">
                 <div className="flex flex-col items-center">
                   <img
                     src={selectedExample.url}
                     alt={selectedExample.name}
-                    className="max-w-64 lg:max-w-full max-h-60 lg:max-h-64 object-contain rounded-lg mb-2"
+                    className="max-w-24 lg:max-w-full max-h-60 lg:max-h-64 object-contain rounded-lg mb-2"
                   />
                   <div className="text-sm text-gray-600 text-center">
                     {selectedExample.name}
@@ -432,8 +437,8 @@ function ImageClassification() {
                               isTopPrediction
                                 ? 'bg-green-500'
                                 : prediction.score > 0.5
-                                  ? 'bg-blue-500'
-                                  : 'bg-gray-400'
+                                ? 'bg-blue-500'
+                                : 'bg-gray-400'
                             }`}
                             style={{
                               width: `${Math.max(prediction.score * 100, 2)}%`

src/components/pipelines/TextClassification.tsx

@@ -87,19 +87,20 @@ function TextClassification() {
   }
 
   return (
-    <div className="flex flex-col h-full max-h-[calc(100dvh-128px)] w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)] w-full p-4 overflow-hidden">
       <h1 className="text-2xl font-bold mb-4 shrink-0">Text Classification</h1>
 
       <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0 overflow-hidden">
         {/* Input Section */}
-        <div className="flex flex-col w-full lg:w-1/2 min-h-0 max-h-[50vh] lg:max-h-none">
+        <div className="flex flex-col w-full lg:w-1/2 min-h-0 overflow-hidden">
           <label className="text-lg font-medium mb-2 shrink-0">
             Input Text ({numberExamples} examples):
           </label>
 
-          <div className="flex flex-col flex-1 min-h-0">
+          <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
             <textarea
-              className="border border-gray-300 rounded-sm p-3 flex-1 resize-none min-h-[200px] lg:min-h-[250px]"
+            
+              className="border border-gray-300 rounded-sm p-3 flex-1 resize-none overflow-y-auto min-h-[150px] lg:min-h-[250px]"
               value={text}
               onChange={(e) => setText(e.target.value)}
               placeholder="Enter text to classify (one per line)..."
@@ -128,12 +129,12 @@ function TextClassification() {
         </div>
 
         {/* Results Section */}
-        <div className="flex flex-col w-full lg:w-1/2 min-h-0 max-h-[50vh] lg:max-h-none">
+        <div className="flex flex-col w-full lg:w-1/2 min-h-0 overflow-hidden">
           <label className="text-lg font-medium mb-2 shrink-0">
             Classification Results ({results.length}):
           </label>
 
-          <div className="border border-gray-300 rounded-sm p-3 flex-1 overflow-y-auto min-h-[200px] lg:min-h-[250px]">
+          <div className="border border-gray-300 rounded-sm p-3 flex-1 overflow-y-auto">
             {results.length === 0 ? (
               <div className="text-gray-500 text-center py-8">
                 No results yet. Click "Classify Text" to analyze your input.