style: auto adjust width (#434)

LGTM
This commit is contained in:
Avan 2025-01-01 00:08:50 +08:00 committed by GitHub
parent 1e3febdc80
commit 7b28f9253b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,5 @@
import { import {
cn,
Modal, Modal,
ModalContent, ModalContent,
ModalHeader, ModalHeader,
@ -29,6 +30,7 @@ const EditInfoModal: React.FC<Props> = (props) => {
const { overrideConfig } = useOverrideConfig() const { overrideConfig } = useOverrideConfig()
const { items: overrideItems = [] } = overrideConfig || {} const { items: overrideItems = [] } = overrideConfig || {}
const [values, setValues] = useState(item) const [values, setValues] = useState(item)
const inputWidth = 'w-[400px] md:w-[400px] lg:w-[600px] xl:w-[800px]'
const onSave = async (): Promise<void> => { const onSave = async (): Promise<void> => {
try { try {
@ -49,7 +51,11 @@ const EditInfoModal: React.FC<Props> = (props) => {
return ( return (
<Modal <Modal
backdrop="blur" backdrop="blur"
classNames={{ backdrop: 'top-[48px]' }} size="5xl"
classNames={{
backdrop: 'top-[48px]',
base: 'w-[600px] md:w-[600px] lg:w-[800px] xl:w-[1024px]'
}}
hideCloseButton hideCloseButton
isOpen={true} isOpen={true}
onOpenChange={onClose} onOpenChange={onClose}
@ -61,7 +67,7 @@ const EditInfoModal: React.FC<Props> = (props) => {
<SettingItem title="名称"> <SettingItem title="名称">
<Input <Input
size="sm" size="sm"
className="w-[200px]" className={cn(inputWidth)}
value={values.name} value={values.name}
onValueChange={(v) => { onValueChange={(v) => {
setValues({ ...values, name: v }) setValues({ ...values, name: v })
@ -73,7 +79,7 @@ const EditInfoModal: React.FC<Props> = (props) => {
<SettingItem title="订阅地址"> <SettingItem title="订阅地址">
<Input <Input
size="sm" size="sm"
className="w-[200px]" className={cn(inputWidth)}
value={values.url} value={values.url}
onValueChange={(v) => { onValueChange={(v) => {
setValues({ ...values, url: v }) setValues({ ...values, url: v })
@ -93,7 +99,7 @@ const EditInfoModal: React.FC<Props> = (props) => {
<Input <Input
size="sm" size="sm"
type="number" type="number"
className="w-[200px]" className={cn(inputWidth)}
value={values.interval?.toString() ?? ''} value={values.interval?.toString() ?? ''}
onValueChange={(v) => { onValueChange={(v) => {
setValues({ ...values, interval: parseInt(v) }) setValues({ ...values, interval: parseInt(v) })