layout changes with media player and negative spacing at top of screen. updated sqlalchemy init for postgres deployment

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, OnInit, OnDestroy } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { RouterOutlet } from '@angular/router';
 import { NavbarComponent } from './navbar/navbar.component';
@@ -13,23 +13,59 @@ import { StationConfigService } from './services/station-config.service';
   templateUrl: './app.html',
   styleUrl: './app.scss',
 })
-export class App {
+export class App implements OnInit, OnDestroy {
   private titleService = inject(Title);
   private stationConfig = inject(StationConfigService);
 
+  readonly hasStream = computed(() => {
+    const cfg = this.stationConfig.config();
+    return !!cfg.stream_url && cfg.stream_url.trim().length > 0;
+  });
+
+  private navbarEl: HTMLElement | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+
   constructor() {
     effect(() => {
       const config = this.stationConfig.config();
       const fullName = `${config.name_primary} ${config.name_secondary}`.trim();
       this.titleService.setTitle(fullName);
 
-      // Update favicon to use the station's logo_url.
-      // Meta.updateTag() is unreliable for favicons in some browsers,
-      // so we update the <link> element directly.
       const faviconEl = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;
       if (faviconEl && config.logo_url) {
         faviconEl.href = config.logo_url;
       }
     });
+
+    effect(() => {
+      if (this.hasStream()) {
+        document.body.classList.add('has-stream');
+      } else {
+        document.body.classList.remove('has-stream');
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    // Defer until the navbar is rendered in the DOM.
+    queueMicrotask(() => {
+      this.navbarEl = document.querySelector('app-navbar');
+      if (!this.navbarEl) return;
+
+      this.updateNavbarHeight();
+
+      this.resizeObserver = new ResizeObserver(() => this.updateNavbarHeight());
+      this.resizeObserver.observe(this.navbarEl!);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+
+  private updateNavbarHeight(): void {
+    if (!this.navbarEl) return;
+    const h = this.navbarEl.offsetHeight;
+    document.documentElement.style.setProperty('--navbar-height', `${h}px`);
   }
 }