obsidian-plugin/ethanolivertroy_obsidian-markitdown
1
0
Fork 0
mirror of https://github.com/ethanolivertroy/obsidian-markitdown.git synced 2026-07-22 05:41:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix preview modal: hard-cap content at 40vh so buttons are always visible

Browse source
This commit is contained in:
Ethan Troy 2026-03-17 21:28:18 -04:00
parent 84277ae686
commit fb07e1c98b
2 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/modals/PreviewModal.ts
View file

@ -28,15 +28,27 @@ export class PreviewModal extends Modal {
}
onOpen() {
const { contentEl } = this;
const { contentEl, modalEl } = this;
contentEl.addClass('markitdown-modal');
contentEl.addClass('markitdown-preview-modal');
// Force the Obsidian modal container to constrain its height
modalEl.style.maxHeight = '80vh';
modalEl.style.display = 'flex';
modalEl.style.flexDirection = 'column';
contentEl.style.display = 'flex';
contentEl.style.flexDirection = 'column';
contentEl.style.overflow = 'hidden';
contentEl.style.flex = '1';
contentEl.style.minHeight = '0';
contentEl.createEl('h2', { text: 'Conversion preview' });
// Metadata section
const metaEl = contentEl.createDiv('markitdown-preview-meta');
const outputBasename = this.outputPath.split('/').pop() || this.outputPath;
metaEl.createEl('div', {
text: `Output: ${this.outputPath}`,
text: `Output: ${outputBasename}`,
cls: 'markitdown-preview-meta-item',
});
metaEl.createEl('div', {
@ -62,19 +74,13 @@ export class PreviewModal extends Modal {
});
}
// Scrollable preview area
// Scrollable preview area — takes remaining space
const previewContainer = contentEl.createDiv('markitdown-preview-content');
previewContainer.createEl('pre', { text: displayContent });
// Buttons
// Buttons — pinned at bottom
const buttonContainer = contentEl.createDiv('markitdown-button-container');
const cancelBtn = buttonContainer.createEl('button', { text: 'Cancel' });
cancelBtn.addEventListener('click', async () => {
await this.onCancel();
this.close();
});
const saveBtn = buttonContainer.createEl('button', {
text: 'Save',
cls: 'mod-cta',
@ -89,6 +95,12 @@ export class PreviewModal extends Modal {
this.close();
}
});
const cancelBtn = buttonContainer.createEl('button', { text: 'Cancel' });
cancelBtn.addEventListener('click', async () => {
await this.onCancel();
this.close();
});
}
onClose() {

15
styles.css
View file

@ -286,14 +286,10 @@ Styles for the Markitdown Obsidian plugin
color: var(--text-faint);
}
/* Preview modal */
/* Preview modal — applied to .modal-content via contentEl */
.markitdown-preview-modal {
width: 80vw;
max-width: 900px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.markitdown-preview-meta {
@ -317,8 +313,7 @@ Styles for the Markitdown Obsidian plugin
}
.markitdown-preview-content {
flex: 1;
min-height: 0;
max-height: 40vh;
overflow-y: auto;
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
@ -327,12 +322,6 @@ Styles for the Markitdown Obsidian plugin
margin-bottom: 12px;
}
.markitdown-preview-modal .markitdown-button-container {
flex-shrink: 0;
padding-top: 8px;
border-top: 1px solid var(--background-modifier-border);
}
.markitdown-preview-content pre {
margin: 0;
white-space: pre-wrap;