Fix edge case when switching to an empty note

src/banner/Banner.svelte

@@ -69,6 +69,8 @@
 
 <style lang="scss">
   // NOTE: This styling rule here may cause side effects to the editing view. Let's hope it doesn't
+  /* BUG: On mobile, there is a horizontal scrolling issue where a small empty space can be
+  scrolled on the right. Unsure if this is due to this or the banner's size */
   :global(.cm-scroller) { flex-direction: column; }
 
   // Parent banner wrapper styling

src/reading/index.ts

@@ -10,7 +10,7 @@ import type { BannerProps, Embedded } from 'src/banner';
 import { extractBannerData } from 'src/bannerData';
 import { plug } from 'src/main';
 import { getSetting } from 'src/settings';
-import { registerSettingChangeEvent } from 'src/utils';
+import { iterateMarkdownLeaves, registerSettingChangeEvent } from 'src/utils';
 
 /* BUG: This doesn't rerender banners in internal embeds properly.
 Reload app or manually edit the view/contents to fix */
@@ -82,4 +82,11 @@ export const registerReadingBannerEvents = () => {
     'defaultHeaderValue'
   ], rerender);
   plug.registerEvent(plug.app.vault.on('rename', rerender));
+
+  // Edge case when switching from a note with a banner to a banner with no data to postprocess
+  plug.registerEvent(plug.app.workspace.on('layout-change', () => {
+    iterateMarkdownLeaves((leaf) => {
+      if (!leaf.view.file.stat.size) destroyBanner(leaf.view.previewMode.docId);
+    }, 'reading');
+  }));
 };

src/types.d.ts

@@ -57,6 +57,7 @@ declare module 'obsidian' {
   }
 
   interface MarkdownPreviewView {
+    docId: string;
     renderer: PreviewRenderer;
   }
 
@@ -71,6 +72,7 @@ declare module 'obsidian' {
   interface View {
     currentMode: EditMode | PreviewMode;
     editor: Editor;
+    file: TFile;
     previewMode: MarkdownPreviewView;
   }