Fix the issues with scrolling in Dashboard Input Field

This commit is contained in:
Vladyslav Matsiiako
2022-11-30 14:36:26 -05:00
parent 7950085fba
commit f9bf418bf8

View File

@@ -65,7 +65,7 @@ const DashboardInputField = ({
return ( return (
<div className="flex-col w-full"> <div className="flex-col w-full">
<div <div
className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`} className={`group relative whitespace-pre flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
> >
<input <input
value={value} value={value}
@@ -75,7 +75,7 @@ const DashboardInputField = ({
blurred blurred
? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent" ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
: "" : ""
} asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`} } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
spellCheck="false" spellCheck="false"
/> />
<div <div
@@ -84,7 +84,7 @@ const DashboardInputField = ({
blurred blurred
? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400" ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
: "" : ""
} flex flex-row font-mono absolute z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`} } flex flex-row whitespace-pre font-mono absolute z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
> >
{ {
value value
@@ -99,11 +99,11 @@ const DashboardInputField = ({
</span> </span>
{word.slice(word.length - 1, word.length) == "}" ? ( {word.slice(word.length - 1, word.length) == "}" ? (
<span className="ph-no-capture text-yellow"> <span className="ph-no-capture text-yellow">
{word.slice(word.length - 1, word.length)}{" "} {word.slice(word.length - 1, word.length)}
</span> </span>
) : ( ) : (
<span className="ph-no-capture text-yellow-400"> <span className="ph-no-capture text-yellow-400">
{word.slice(word.length - 1, word.length)}{" "} {word.slice(word.length - 1, word.length)}
</span> </span>
)} )}
</span> </span>