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" className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
onValueChange={(value) => setActiveTab(value)} 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> <TabsList>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger> <TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
@ -141,9 +141,9 @@ export default function CodeAreaModal({
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsContent <TabsContent
value={index.toString()} 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 <AceEditor
value={code} value={code}
mode="python" 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" 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"> </div> : <div className="w-full h-full bg-red-200 p-2 flex flex-col overflow-scroll custom-scroll text-left">
<h1>{error?.detail}</h1> <h1 className="text-red-600 text-lg">{error?.detail}</h1>
<div></div> <span className="border border-red-300 w-full"></span>
<div className="text-red-500 text-sm">{error?.traceback}</div>
</div>} </div>}
</TabsContent>)) </TabsContent>))
} }

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

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