mejoras de UI 2

components/MainContainer.client.vue

@@ -58,7 +58,7 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
 .main-container {
   /* Parametrized viewport sizing */
   --app-vertical-margin: 10px; /* Top/bottom margin between both components */
-  --playback-controls-height: 60px; /* Adjustable height for PlaybackControls */
+  --playback-controls-height: 40px; /* Compact but not tiny */
   --tracklist-height: calc(100vh - (var(--app-vertical-margin) * 2) - var(--playback-controls-height));
 
   /* Container takes full viewport minus vertical margins */
@@ -109,10 +109,13 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: nowrap;
+  column-gap: 12px;
 }
 
 .app-title {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0; /* allow text ellipsis */
 }
 
 .title-text {
@@ -127,6 +130,9 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   display: flex;
   align-items: center;
   gap: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .title-icon {
@@ -144,8 +150,16 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
 
 .header-controls {
   display: flex;
-  gap: 16px;
+  gap: 10px;
   align-items: center;
+  flex: 0 0 auto;
+}
+
+/* Avoid hover transforms causing layout shifts in header controls */
+.header-controls :deep(.base-button.icon:hover),
+.header-controls :deep(.theme-toggle:hover),
+.header-controls :deep(.icon-button:hover .icon) {
+  transform: none !important;
 }
 
 .main-content {
@@ -192,7 +206,14 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
+@media (max-width: 680px) {
+  /* Hide subtitle to keep header inline on narrow screens */
+  .subtitle {
+    display: none;
+  }
+}
+
+@media (max-width: 520px) {
   .main-container {
     padding: 15px;
     padding-bottom: 0;
@@ -202,8 +223,8 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   
   .header-content {
     flex-direction: column;
-    gap: 16px;
-    padding: 16px;
+    gap: 12px;
+    padding: 12px 16px;
     text-align: center;
   }