UI mejorada

components/AuroraBackground.client.vue

@@ -201,7 +201,7 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: 0; /* Render above body background but below main content */
   overflow: hidden;
   pointer-events: none;
 }
@@ -357,4 +357,4 @@ onMounted(() => {
   will-change: transform;
   transform: translateZ(0);
 }
-</style>
+</style>

components/MainContainer.client.vue

@@ -56,7 +56,15 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
 
 <style scoped>
 .main-container {
-  height: 90vh;
+  /* Parametrized viewport sizing */
+  --app-vertical-margin: 10px; /* Top/bottom margin between both components */
+  --playback-controls-height: 60px; /* Adjustable height for PlaybackControls */
+  --tracklist-height: calc(100vh - (var(--app-vertical-margin) * 2) - var(--playback-controls-height));
+
+  /* Container takes full viewport minus vertical margins */
+  height: calc(100vh - (var(--app-vertical-margin) * 2));
+  margin-top: var(--app-vertical-margin);
+  margin-bottom: var(--app-vertical-margin);
   display: flex;
   flex-direction: column;
   max-width: 1200px;
@@ -64,7 +72,9 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   padding: 20px;
   padding-bottom: 0;
   position: relative;
-  overflow: hidden;
+  /* Keep shadows visible and allow backdrop to show through */
+  overflow: visible;
+  z-index: 1; /* Ensure content sits above Aurora background */
 }
 
 .app-header {
@@ -186,7 +196,8 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   .main-container {
     padding: 15px;
     padding-bottom: 0;
-    height: 92vh;
+    /* Keep same parametrized behavior on mobile */
+    height: calc(100vh - (var(--app-vertical-margin) * 2));
   }
   
   .header-content {
@@ -275,4 +286,4 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
     background: var(--accent-primary);
   }
 }
-</style>
+</style>

components/PlaybackControls.client.vue

@@ -65,6 +65,8 @@ const cycleRepeat = () => {
 
 <style scoped>
 .playback-controls {
+  /* Allow parent to control overall height budget */
+  height: var(--playback-controls-height, auto);
   display: flex;
   gap: 10px;
   align-items: center;
@@ -101,4 +103,4 @@ const cycleRepeat = () => {
     gap: 8px;
   }
 }
-</style>
+</style>

components/TrackList.client.vue

@@ -78,6 +78,8 @@ const handleTrackClick = (track, index) => {
 
 <style scoped>
 .track-list {
+  /* Cap height so sum with PlaybackControls fits 100vh; flex handles actual sizing */
+  max-height: var(--tracklist-height, none);
   padding: 20px;
   margin-bottom: 0;
   background: rgba(255, 255, 255, 0.05);
@@ -277,4 +279,4 @@ const handleTrackClick = (track, index) => {
     gap: 6px;
   }
 }
-</style>
+</style>