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

src/app/app.scss

@@ -1,8 +1,6 @@
 @use '../styles/variables' as *;
 
-// Bar heights (keep in sync so player sits flush below navbar)
-$navbar-height-mobile: 64px;
-$navbar-height-desktop: 52px;
+// Player height (matches media-player component min-height)
 $player-height: 48px;
 
 app-navbar {
@@ -11,26 +9,39 @@ app-navbar {
   left: 0;
   right: 0;
   z-index: 200;
+  overflow: visible;
 }
 
+// App-level media player: shown on mobile (fixed strip), hidden on desktop (navbar instance shown)
 app-media-player {
-  position: fixed;
-  top: $navbar-height-mobile;
-  left: 0;
-  right: 0;
-  z-index: 199;
-}
-
-main {
-  padding-top: calc(#{$navbar-height-mobile} + #{$player-height});
-}
-
-@media (min-width: #{$bp-md}) {
-  app-media-player {
-    top: $navbar-height-desktop;
+  // Mobile: fixed strip below navbar
+  @media (max-width: #{$bp-md - 1px}) {
+    position: fixed;
+    top: var(--navbar-height);
+    left: 0;
+    right: 0;
+    z-index: 199;
   }
 
+  // Desktop: hidden (navbar contains the visible instance)
+  @media (min-width: $bp-md) {
+    display: none;
+  }
+}
+
+// Main content padding
+@media (max-width: #{$bp-md - 1px}) {
   main {
-    padding-top: calc(#{$navbar-height-desktop} + #{$player-height});
+    padding-top: calc(var(--navbar-height) + #{$player-height});
+
+    &.no-stream {
+      padding-top: var(--navbar-height);
+    }
+  }
+}
+
+@media (min-width: $bp-md) {
+  main {
+    padding-top: var(--navbar-height);
   }
 }