diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.tsx b/apps/client/src/widgets/type_widgets/SqlConsole.tsx
index 298ffa1bd..8823f59ab 100644
--- a/apps/client/src/widgets/type_widgets/SqlConsole.tsx
+++ b/apps/client/src/widgets/type_widgets/SqlConsole.tsx
@@ -23,6 +23,7 @@ export default function SqlConsole(props: TypeWidgetProps) {
{...props}
editorBefore={}
previewContent={}
+ forceOrientation="vertical"
splitOptions={{
sizes: [ 70, 30 ]
}}
diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
index 0b45d8521..5e4da905b 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -18,6 +18,7 @@ export interface SplitEditorProps extends EditableCodeProps {
previewContent: ComponentChildren;
previewButtons?: ComponentChildren;
editorBefore?: ComponentChildren;
+ forceOrientation?: "horizontal" | "vertical";
}
/**
@@ -29,8 +30,8 @@ export interface SplitEditorProps extends EditableCodeProps {
* - Can display errors to the user via {@link setError}.
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/
-export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, ...editorProps }: SplitEditorProps) {
- const splitEditorOrientation = useSplitOrientation();
+export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, ...editorProps }: SplitEditorProps) {
+ const splitEditorOrientation = useSplitOrientation(forceOrientation);
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
const containerRef = useRef(null);
@@ -95,8 +96,9 @@ export function PreviewButton(props: Omit) {
/>;
}
-function useSplitOrientation() {
+function useSplitOrientation(forceOrientation?: "horizontal" | "vertical") {
const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
+ if (forceOrientation) return forceOrientation;
if (isMobile()) return "vertical";
if (!splitEditorOrientation) return "horizontal";
return splitEditorOrientation as "horizontal" | "vertical";