rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: improve Modal component responsiveness and styling

Browse source
This commit is contained in:
swve 2025-02-13 18:14:21 +01:00
parent 7ef01b90c0
commit 35c2fbc0f7
1 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

28
apps/web/components/Objects/StyledElements/Modal/Modal.tsx
View file

@ -23,21 +23,21 @@ type ModalParams = {
const Modal = (params: ModalParams) => { const Modal = (params: ModalParams) => {
const getMinHeight = () => { const getMinHeight = () => {
switch (params.minHeight) { switch (params.minHeight) {
case 'sm': return 'min-h-[300px] max-h-[90vh]' case 'sm': return 'md:min-h-[300px]'
case 'md': return 'min-h-[400px] max-h-[90vh]' case 'md': return 'md:min-h-[500px]'
case 'lg': return 'min-h-[500px] max-h-[90vh]' case 'lg': return 'md:min-h-[700px]'
case 'xl': return 'min-h-[600px] max-h-[90vh]' case 'xl': return 'md:min-h-[900px]'
default: return 'max-h-[90vh]' default: return ''
} }
} }
const getMinWidth = () => { const getMinWidth = () => {
switch (params.minWidth) { switch (params.minWidth) {
case 'sm': return 'w-[95vw] sm:w-[90vw] md:w-[600px]' case 'sm': return 'md:min-w-[600px]'
case 'md': return 'w-[95vw] sm:w-[90vw] md:w-[800px]' case 'md': return 'md:min-w-[800px]'
case 'lg': return 'w-[95vw] sm:w-[90vw] lg:w-[1000px]' case 'lg': return 'md:min-w-[1000px]'
case 'xl': return 'w-[95vw] sm:w-[90vw] xl:w-[1200px]' case 'xl': return 'md:min-w-[1200px]'
default: return 'w-[95vw] sm:w-[90vw]' default: return ''
} }
} }
@ -47,8 +47,12 @@ const Modal = (params: ModalParams) => {
<DialogTrigger asChild>{params.dialogTrigger}</DialogTrigger> <DialogTrigger asChild>{params.dialogTrigger}</DialogTrigger>
)} )}
<DialogContent className={cn( <DialogContent className={cn(
"overflow-auto mx-auto", "overflow-auto",
"p-4 md:p-6", "w-[95vw] max-w-[95vw]",
"max-h-[90vh]",
"p-4",
// Tablet and up
"md:w-auto md:max-w-[90vw] md:p-6",
getMinHeight(), getMinHeight(),
getMinWidth(), getMinWidth(),
params.customHeight, params.customHeight,