paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-03 13:33:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): fix create diagram modal on mobile (#646)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2025-04-04 09:09:04 +03:00
committed by GitHub
parent f7a6e0cb5e
commit 25c4b42538
2 changed files with 138 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/dialogs/common/import-database/import-database.tsx
View File

@@ -173,19 +173,8 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
);
}, [title]);
const renderContent = useCallback(() => {
return (
<DialogInternalContent>
<ResizablePanelGroup
direction={isDesktop ? 'horizontal' : 'vertical'}
className="min-h-[500px] md:min-h-fit"
>
<ResizablePanel
defaultSize={25}
minSize={25}
maxSize={99}
className="min-h-fit rounded-md bg-gradient-to-b from-slate-50 to-slate-100 p-2 dark:from-slate-900 dark:to-slate-800 md:min-h-fit md:min-w-[350px] md:rounded-l-md md:p-2"
>
const renderInstructions = useCallback(
() => (
<InstructionsSection
databaseType={databaseType}
importMethod={importMethod}
@@ -195,9 +184,20 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
setShowSSMSInfoDialog={setShowSSMSInfoDialog}
showSSMSInfoDialog={showSSMSInfoDialog}
/>
</ResizablePanel>
{isDesktop ? <ResizableHandle withHandle /> : null}
<ResizablePanel className="min-h-40 py-2 md:px-2 md:py-0">
),
[
databaseType,
importMethod,
setDatabaseEdition,
setImportMethod,
databaseEdition,
setShowSSMSInfoDialog,
showSSMSInfoDialog,
]
);
const renderOutputTextArea = useCallback(
() => (
<div className="flex size-full flex-col gap-1 overflow-hidden rounded-md border p-1">
<div className="w-full text-center text-xs text-muted-foreground">
{importMethod === 'query'
@@ -209,11 +209,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
<Editor
value={scriptResult}
onChange={debouncedHandleInputChange}
language={
importMethod === 'query'
? 'json'
: 'sql'
}
language={importMethod === 'query' ? 'json' : 'sql'}
loading={<Spinner />}
theme={
effectiveTheme === 'dark'
@@ -244,7 +240,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
alwaysConsumeMouseWheel: false,
},
}}
className="size-full"
className="size-full min-h-40"
/>
</Suspense>
</div>
@@ -276,27 +272,50 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
</div>
) : null}
</div>
</ResizablePanel>
</ResizablePanelGroup>
</DialogInternalContent>
);
}, [
showSSMSInfoDialog,
databaseEdition,
databaseType,
),
[
errorMessage,
scriptResult,
setDatabaseEdition,
t,
isDesktop,
importMethod,
effectiveTheme,
debouncedHandleInputChange,
showCheckJsonButton,
isCheckingJson,
handleCheckJson,
effectiveTheme,
debouncedHandleInputChange,
importMethod,
setImportMethod,
]);
t,
]
);
const renderContent = useCallback(() => {
return (
<DialogInternalContent>
{isDesktop ? (
<ResizablePanelGroup
direction={isDesktop ? 'horizontal' : 'vertical'}
className="min-h-[500px] md:min-h-fit"
>
<ResizablePanel
defaultSize={25}
minSize={25}
maxSize={99}
className="min-h-fit rounded-md bg-gradient-to-b from-slate-50 to-slate-100 p-2 dark:from-slate-900 dark:to-slate-800 md:min-h-fit md:min-w-[350px] md:rounded-l-md md:p-2"
>
{renderInstructions()}
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel className="min-h-40 py-2 md:px-2 md:py-0">
{renderOutputTextArea()}
</ResizablePanel>
</ResizablePanelGroup>
) : (
<div className="flex flex-col gap-2">
{renderInstructions()}
{renderOutputTextArea()}
</div>
)}
</DialogInternalContent>
);
}, [renderOutputTextArea, renderInstructions, isDesktop]);
const renderFooter = useCallback(() => {
return (

2
src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
View File

@@ -152,7 +152,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
}}
>
<DialogContent
className="flex max-h-screen w-full flex-col md:max-w-[900px]"
className="flex max-h-dvh w-full flex-col md:max-w-[900px]"
showClose={hasExistingDiagram}
>
{step === CreateDiagramDialogStep.SELECT_DATABASE ? (