diff --git a/packages/web/src/tabpanel/TabContent.svelte b/packages/web/src/tabpanel/TabContent.svelte
index 8eac0de10..d39cbf321 100644
--- a/packages/web/src/tabpanel/TabContent.svelte
+++ b/packages/web/src/tabpanel/TabContent.svelte
@@ -5,6 +5,7 @@
   export let tabid;
   export let tabVisible;
   export let tabFocused;
+  export let tabPreviewMode;
   export let tabComponent;
 
   setContext('tabid', tabid);
@@ -19,7 +20,7 @@
 </script>
 
 <div class:tabVisible>
-  <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} {tabFocused} />
+  <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} {tabFocused} {tabPreviewMode} />
 </div>
 
 <style>
diff --git a/packages/web/src/tabpanel/TabRegister.svelte b/packages/web/src/tabpanel/TabRegister.svelte
index cb5083e02..de699b017 100644
--- a/packages/web/src/tabpanel/TabRegister.svelte
+++ b/packages/web/src/tabpanel/TabRegister.svelte
@@ -53,5 +53,6 @@
     unsaved={openedTabsByTabId[tabid]?.unsaved}
     tabVisible={tabid == shownTab?.tabid}
     tabFocused={tabid == shownTab?.tabid && shownTab?.focused}
+    tabPreviewMode={tabid == shownTab?.tabid && shownTab?.tabPreviewMode}
   />
 {/each}
diff --git a/packages/web/src/utility/common.ts b/packages/web/src/utility/common.ts
index fe850e272..db20bfc4e 100644
--- a/packages/web/src/utility/common.ts
+++ b/packages/web/src/utility/common.ts
@@ -23,7 +23,9 @@ export function changeTab(tabid, changeFunc) {
 export function markTabUnsaved(tabid) {
   const tab = getOpenedTabs().find(x => x.tabid == tabid);
   if (tab.unsaved) return;
-  openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: true } : tab)));
+  openedTabs.update(files =>
+    files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: true, tabPreviewMode: false } : tab))
+  );
 }
 
 export function markTabSaved(tabid) {