improve responsiveness
This commit is contained in:
parent
e39239b9b5
commit
9a976a8be5
2 changed files with 10 additions and 9 deletions
|
|
@ -4,23 +4,24 @@ const BaseInput = ({
|
|||
onChangeCallback,
|
||||
placeholder = "",
|
||||
suffix,
|
||||
inputMode,
|
||||
inputWidth = "w-[60px]",
|
||||
inputClassName = "",
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex">
|
||||
<label className="my-1" htmlFor="">
|
||||
<div className="flex md:flex-row flex-col items-center my-1">
|
||||
<label className="" htmlFor="">
|
||||
{label}
|
||||
</label>
|
||||
<div className="flex mx-auto">
|
||||
<input
|
||||
className={`ml-3 ${inputWidth} bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 ${inputClassName}`}
|
||||
className={`md:ml-3 my-0 ${inputWidth} bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 ${inputClassName}`}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
onChange={onChangeCallback}
|
||||
/>
|
||||
</label>
|
||||
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
|
||||
{suffix}
|
||||
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
|
||||
{suffix}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@ const LoanPanel = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
|
||||
<form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
|
||||
<div className=" mb p-5 bg-gray-50 rounded-3xl border border-gray-400">
|
||||
<form className="flex flex-col justify-end md:items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
|
||||
<LoanPrincipalInput
|
||||
onChangeCallback={handleLoanPrincipalChange}
|
||||
loanPrincipal={loanPrincipal}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue