Browse Source

fix(ui): add bottom padding to snap content and use hasError on number input to prevent border-bottom clipping

master
mortezaei 2 days ago
parent
commit
2330770062
  1. 14
      src/components/Componentes/question-number.tsx
  2. 2
      src/components/Componentes/question-snap-list.tsx

14
src/components/Componentes/question-number.tsx

@ -217,6 +217,7 @@ export default function QuestionNumber({
required={question.required && !disabled} required={question.required && !disabled}
disabled={disabled || Boolean(derivedFromQuestion)} disabled={disabled || Boolean(derivedFromQuestion)}
placeholder={dynamicPlaceholder} placeholder={dynamicPlaceholder}
hasError={isOutOfRange}
value={localTextValue} value={localTextValue}
onChange={(event) => { onChange={(event) => {
const nextValue = event.target.value; const nextValue = event.target.value;
@ -247,12 +248,6 @@ export default function QuestionNumber({
); );
} }
}} }}
className={[
"h-[54px] w-full rounded-[16px] border px-4.5 text-[15px] font-medium text-[#181818] outline-none transition-all placeholder:text-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] disabled:bg-[#F5F2F1] disabled:text-[#7C7472]",
isOutOfRange
? "border-[#F2465F] ring-1 ring-[#F2465F]"
: "border-[#D0D5DD] hover:border-[#98A2B3] bg-white",
].join(" ")}
/> />
</div> </div>
<div className="w-[110px] shrink-0 relative"> <div className="w-[110px] shrink-0 relative">
@ -331,6 +326,7 @@ export default function QuestionNumber({
required={question.required && !disabled} required={question.required && !disabled}
disabled={disabled || Boolean(derivedFromQuestion)} disabled={disabled || Boolean(derivedFromQuestion)}
placeholder={question.extras.placeHolder} placeholder={question.extras.placeHolder}
hasError={isOutOfRange}
value={inputValue} value={inputValue}
onChange={(event) => { onChange={(event) => {
const raw = event.target.value; const raw = event.target.value;
@ -362,12 +358,6 @@ export default function QuestionNumber({
Number.isNaN(parsed) ? cleaned : parsed, Number.isNaN(parsed) ? cleaned : parsed,
); );
}} }}
className={[
"h-[54px] w-full rounded-[16px] border px-4.5 text-[15px] font-medium text-[#181818] outline-none transition-all placeholder:text-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] disabled:bg-[#F5F2F1] disabled:text-[#7C7472]",
isOutOfRange
? "border-[#F2465F] ring-1 ring-[#F2465F]"
: "border-[#D0D5DD] hover:border-[#98A2B3] bg-white",
].join(" ")}
/> />
{isOutOfRange ? ( {isOutOfRange ? (
<span className="block text-[10px] font-semibold text-[#F2465F]"> <span className="block text-[10px] font-semibold text-[#F2465F]">

2
src/components/Componentes/question-snap-list.tsx

@ -886,7 +886,7 @@ export function QuestionSnapList({
].join(" ")} ].join(" ")}
> >
<div <div
className={`question-snap-content ${wrapperStyles} overflow-y-auto max-h-full overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`}
className={`question-snap-content ${wrapperStyles} overflow-y-auto max-h-full overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden p-0.5 pb-2`}
> >
{question} {question}
</div> </div>

Loading…
Cancel
Save