diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx index 5ecc8a7c5d..26ea7b34f4 100644 --- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx @@ -6,6 +6,7 @@ import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Cluster, Stack } from '../../Layout' import { ResponseMessage } from '../../ResponseMessage' +import { Section } from '../../SectioningContent' import { DialogBody, type Props as DialogBodyProps } from '../DialogBody' import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader' import { dialogContentInner } from '../dialogInnerStyle' @@ -98,9 +99,8 @@ export const ActionDialogContentInner: FC = ({ }, []) return ( - // HINT: bodyをスクロールできるようにするため、Sectionではなく、Stack[as="section"][gap=0]を使用する必要がある - // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content - + // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content +
{children} @@ -128,7 +128,7 @@ export const ActionDialogContentInner: FC = ({ )} - +
) } diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx index bb68dfe845..917f9e6b8b 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx @@ -12,6 +12,7 @@ import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Cluster, Stack } from '../../Layout' import { ResponseMessage } from '../../ResponseMessage' +import { Section } from '../../SectioningContent' import { DialogBody, Props as DialogBodyProps } from '../DialogBody' import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader' import { dialogContentInner } from '../dialogInnerStyle' @@ -123,9 +124,8 @@ export const FormDialogContentInner: FC = ({ }, []) return ( - // HINT: bodyをスクロールできるようにするため、Sectionではなく、Stack[as="section"][gap=0]を使用する必要がある - // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content, smarthr/a11y-prohibit-sectioning-content-in-form - + // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content, smarthr/a11y-prohibit-sectioning-content-in-form +
@@ -154,7 +154,7 @@ export const FormDialogContentInner: FC = ({ )} - +
) } diff --git a/packages/smarthr-ui/src/components/Dialog/dialogInnerStyle.ts b/packages/smarthr-ui/src/components/Dialog/dialogInnerStyle.ts index fcc85d22c3..504f06e574 100644 --- a/packages/smarthr-ui/src/components/Dialog/dialogInnerStyle.ts +++ b/packages/smarthr-ui/src/components/Dialog/dialogInnerStyle.ts @@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants' export const dialogContentInner = tv({ slots: { - wrapper: 'shr-max-h-[calc(100dvh-theme(spacing.2))]', + wrapper: 'shr-flex shr-flex-col shr-max-h-[calc(100dvh-theme(spacing.2))]', actionArea: [ 'smarthr-ui-Dialog-actionArea', 'shr-border-t-shorthand shr-px-1.5 shr-py-1 shr-flex-[0_0_auto] shr-sticky shr-bottom-0 shr-z-1 shr-bg-white shr-rounded-b-m',