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.
|