Abdulkader Safi

Task editor drops the split view for tabs

The task sidebar squeezed markdown source and preview side by side until neither was readable. It now shows one full-width pane with Markdown and Preview tabs, plus an Open in new tab button.

1 min read

Share
Screenshot of MD Kanban

The task sidebar showed the markdown source and the rendered preview next to each other. On a T-70 card with a table in it, each half was so narrow the text wrapped every few words and neither side was readable. The fix was to show one pane at a time.

What changed

TaskEditor.vue now renders a single full-width pane with two tabs on top: Markdown and Preview. The tab choice sticks in localStorage, so reopening a card lands where you left it. The old side-by-side grid is gone, which also fixes the cramped layout on small screens where the preview used to hide entirely.

A second commit added an "Open in new tab" button that only appears in Preview mode. It writes the rendered HTML into a blank browser tab inside a 720px centered column on a dark background, with the card title as the page title. Long cards are now readable without the sidebar squeezing them.

The checks

vue-tsc --noEmit passes on both commits. Both board tasks (editor-preview-tabs and editor-open-preview-window) moved todo to in-progress to done as the work landed, and the commits are efe5bbc and 796ac04 on main.

Last updated 10 Sep 2026 · filed under Tools, vue, web application

Every entry on this project

13 build notes, in order

Including the ones where nothing worked. You are on part 10.

Read the series →

Written by

Abdulkader Safi

Software Engineer

Lead engineer at DSRPT, from Lebanon and based in Kuwait. I write about the tools and bugs from real client work, with the numbers I measured.

About me → GitHub LinkedIn

Need this kind of work done on your project?

Start a project →

Keep reading

More from MD Kanban

All 13 entries →