improve layout

src/slices/calendar-navigation/ViewContainerService.ts

@@ -35,6 +35,8 @@ export class ViewContainerService {
         existingComponents.forEach(component => {
             component.remove();
         });
+        
+        leafContainer.removeClass('streams-leaf-active');
     }
 
     /**
@@ -44,6 +46,9 @@ export class ViewContainerService {
      * @returns True if attachment was successful, false otherwise
      */
     attachComponent(component: HTMLElement, leaf: WorkspaceLeaf): boolean {
+        // Add state class to the root leaf container to reliably target layout CSS
+        leaf.view.containerEl.addClass('streams-leaf-active');
+
         // Only add the calendar component if we're in the main editor area
         if (!this.isMainEditorLeaf(leaf)) {
             // Don't add calendar component to sidebars or other panes

styles.css

@@ -295,17 +295,33 @@
 }
 
 .is-phone .view-header {
-    position: relative;
     z-index: 10000;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: var(--header-height);
 }
 
-/* Override Obsidian's built-in margin-top for view-content on phone globally 
-   because our plugin makes .view-header position: relative globally */
-.is-phone .mod-root .workspace-leaf-content .view-content {
-    margin-top: 0 !important;
+/* Ensure the native title container doesn't wrap to a new line, but shrinks and truncates as normal */
+.is-phone .view-header>.view-header-title-container {
+    min-width: 0;
+    flex: 1 1 0;
+}
+
+/* 
+ * HOLISTIC SCROLLING FIX: 
+ * Instead of making the header relative (which breaks immersive scrolling) or zeroing out padding, 
+ * we let the header be native (absolute) so content scrolls under it. 
+ * Since our Streams bar makes the header taller, we dynamically increase Obsidian's top-spacing variables
+ * for this specific leaf so the content natively starts below our taller header.
+ */
+.is-phone .workspace-leaf-content.streams-leaf-active {
+    --view-top-spacing: calc(var(--header-height) + 28px);
+    --view-top-spacing-markdown: calc(var(--header-height) + 28px);
 }
 
 .is-phone .streams-bar-component {
+    order: 99;
+    flex-basis: 100%;
     backdrop-filter: none;
     background-color: transparent;
     border-bottom: none;