jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

chore(codeAreaModal): adjust height of code area and error message container for better UI

Browse source 
fix(codeAreaModal): fix styling issue with scrollbar height in code area
This commit is contained in:
anovazzi1 2023-06-29 11:51:03 -03:00
commit 7d8304cb60
2 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -132,7 +132,7 @@ export default function CodeAreaModal({
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
onValueChange={(value) => setActiveTab(value)}
>
<div className="flex flex-col items-start h-80 px-2">
<div className="flex flex-col items-start h-72 px-2">
<TabsList>
{tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
@ -141,9 +141,9 @@ export default function CodeAreaModal({
{tabs.map((tab, index) => (
<TabsContent
value={index.toString()}
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1 "
className="overflow-hidden w-full h-full px-4 pb-4 mt-1"
>
{tab.name === "code" ? <div className="h-full w-full my-2">
{tab.name === "code" ? <div className="h-full w-full">
<AceEditor
value={code}
mode="python"
@ -159,9 +159,10 @@ export default function CodeAreaModal({
}}
className="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
/>
</div> : <div className="w-full h-full bg-red-400">
<h1>{error?.detail}</h1>
<div></div>
</div> : <div className="w-full h-full bg-red-200 p-2 flex flex-col overflow-scroll custom-scroll text-left">
<h1 className="text-red-600 text-lg">{error?.detail}</h1>
<span className="border border-red-300 w-full"></span>
<div className="text-red-500 text-sm">{error?.traceback}</div>
</div>}
</TabsContent>))
}

1
src/frontend/tailwind.config.js
View file

@ -233,6 +233,7 @@ module.exports = {
".custom-scroll": {
"&::-webkit-scrollbar": {
width: "8px",
height: "8px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "#f1f1f1",