fix css in TextClassification
Browse files
src/components/pipelines/TextClassification.tsx
CHANGED
|
@@ -87,19 +87,19 @@ function TextClassification() {
|
|
| 87 |
}
|
| 88 |
|
| 89 |
return (
|
| 90 |
-
<div className="flex flex-col h-full max-h-[calc(100dvh-148px)]
|
| 91 |
<h1 className="text-2xl font-bold mb-4 shrink-0">Text Classification</h1>
|
| 92 |
|
| 93 |
-
<div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
|
| 94 |
{/* Input Section */}
|
| 95 |
-
<div className="flex flex-col w-full lg:w-1/2 min-h-0">
|
| 96 |
<label className="text-lg font-medium mb-2 shrink-0">
|
| 97 |
Input Text ({numberExamples} examples):
|
| 98 |
</label>
|
| 99 |
|
| 100 |
<div className="flex flex-col flex-1 min-h-0">
|
| 101 |
<textarea
|
| 102 |
-
className="border border-gray-300 rounded-sm p-3 flex-1 resize-none min-h-[200px]"
|
| 103 |
value={text}
|
| 104 |
onChange={(e) => setText(e.target.value)}
|
| 105 |
placeholder="Enter text to classify (one per line)..."
|
|
@@ -128,12 +128,12 @@ function TextClassification() {
|
|
| 128 |
</div>
|
| 129 |
|
| 130 |
{/* Results Section */}
|
| 131 |
-
<div className="flex flex-col w-full lg:w-1/2 min-h-0">
|
| 132 |
<label className="text-lg font-medium mb-2 shrink-0">
|
| 133 |
Classification Results ({results.length}):
|
| 134 |
</label>
|
| 135 |
|
| 136 |
-
<div className="border border-gray-300 rounded-sm p-3 flex-1 overflow-y-auto min-h-[200px]">
|
| 137 |
{results.length === 0 ? (
|
| 138 |
<div className="text-gray-500 text-center py-8">
|
| 139 |
No results yet. Click "Classify Text" to analyze your input.
|
|
|
|
| 87 |
}
|
| 88 |
|
| 89 |
return (
|
| 90 |
+
<div className="flex flex-col h-full max-h-[calc(100dvh-148px)] w-full p-4">
|
| 91 |
<h1 className="text-2xl font-bold mb-4 shrink-0">Text Classification</h1>
|
| 92 |
|
| 93 |
+
<div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0 overflow-hidden">
|
| 94 |
{/* Input Section */}
|
| 95 |
+
<div className="flex flex-col w-full lg:w-1/2 min-h-0 max-h-[50vh] lg:max-h-none">
|
| 96 |
<label className="text-lg font-medium mb-2 shrink-0">
|
| 97 |
Input Text ({numberExamples} examples):
|
| 98 |
</label>
|
| 99 |
|
| 100 |
<div className="flex flex-col flex-1 min-h-0">
|
| 101 |
<textarea
|
| 102 |
+
className="border border-gray-300 rounded-sm p-3 flex-1 resize-none min-h-[200px] lg:min-h-[250px]"
|
| 103 |
value={text}
|
| 104 |
onChange={(e) => setText(e.target.value)}
|
| 105 |
placeholder="Enter text to classify (one per line)..."
|
|
|
|
| 128 |
</div>
|
| 129 |
|
| 130 |
{/* Results Section */}
|
| 131 |
+
<div className="flex flex-col w-full lg:w-1/2 min-h-0 max-h-[50vh] lg:max-h-none">
|
| 132 |
<label className="text-lg font-medium mb-2 shrink-0">
|
| 133 |
Classification Results ({results.length}):
|
| 134 |
</label>
|
| 135 |
|
| 136 |
+
<div className="border border-gray-300 rounded-sm p-3 flex-1 overflow-y-auto min-h-[200px] lg:min-h-[250px]">
|
| 137 |
{results.length === 0 ? (
|
| 138 |
<div className="text-gray-500 text-center py-8">
|
| 139 |
No results yet. Click "Classify Text" to analyze your input.
|