CollapseSection превращал заголовки "Кто обращается" / "Суть обращения" в кнопки — по клику секция пряталась целиком, вместе с обязательными полями. Легко было свернуть случайно и не заметить, что часть формы больше не видна (и не отправляется). Заменены на обычные div с отступом: контент всегда на экране, сворачивать нечего. Один из двух известных факторов, из-за которых форма на мобильном "теряла" часть контента (второй — фикс на 100dvh, отдельным коммитом): свёрнутая секция резко уменьшала высоту страницы, из-за чего казалось, что скролл пропал и форма "не двигается вниз". Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,3 +3,14 @@
|
||||
.notice {
|
||||
margin-bottom: $sp-5;
|
||||
}
|
||||
|
||||
.group {
|
||||
margin-bottom: $sp-6;
|
||||
}
|
||||
|
||||
// Разделитель между группами полей — только между ними: работает через
|
||||
// соседний селектор, поэтому перед первой группой и после последней его нет.
|
||||
.group + .group {
|
||||
padding-top: $sp-6;
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
CollapseSection,
|
||||
FormActions,
|
||||
FormCard,
|
||||
FormGrid,
|
||||
Toggle
|
||||
} from '@tnsu/ui-kit';
|
||||
import { Alert, Button, FormActions, FormCard, FormGrid, Toggle } from '@tnsu/ui-kit';
|
||||
import { Field } from '../../components/Field/Field';
|
||||
import { AppealSection } from './sections/AppealSection';
|
||||
import { AuthorSection } from './sections/AuthorSection';
|
||||
@@ -34,13 +26,16 @@ export const FeedbackForm: React.FC = () => {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<CollapseSection title="Кто обращается" icon="people">
|
||||
{/* Раньше секции лежали в CollapseSection и сворачивались по клику на
|
||||
заголовок — можно было случайно спрятать обязательные поля и не
|
||||
заметить это. Группа теперь просто div с отступом: поля всегда видны. */}
|
||||
<div className={styles.group}>
|
||||
<AuthorSection data={data} errors={errors} set={set} />
|
||||
</CollapseSection>
|
||||
</div>
|
||||
|
||||
<CollapseSection title="Суть обращения" icon="chat">
|
||||
<div className={styles.group}>
|
||||
<AppealSection data={data} errors={errors} set={set} />
|
||||
</CollapseSection>
|
||||
</div>
|
||||
|
||||
{/* Спрашиваем в самом конце и только у именных обращений: у анонимного
|
||||
ответа всё равно не будет, вопрос был бы бессмысленным. */}
|
||||
|
||||
Reference in New Issue
Block a user