mejoras de UI 2

components/PlaybackControls.client.vue

@@ -68,8 +68,10 @@ const cycleRepeat = () => {
   /* Allow parent to control overall height budget */
   height: var(--playback-controls-height, auto);
   display: flex;
-  gap: 10px;
+  gap: 4px;
   align-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
 }
 
 .shuffle-btn:hover {
@@ -97,10 +99,18 @@ const cycleRepeat = () => {
   box-shadow: 0 0 20px var(--accent-primary);
 }
 
+/* Keep layout from expanding on hover transforms */
+.playback-controls :deep(.base-button.icon:hover) {
+  transform: none !important;
+}
+.playback-controls :deep(.icon-button:hover .icon) {
+  transform: none !important;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
   .playback-controls {
-    gap: 8px;
+    gap: 4px;
   }
 }
 </style>