Reveal full-screen player controls on hover and balance their layout

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/widgets/FullPlayer.tsx

@@ -60,12 +60,21 @@ export function FullPlayer({ onClose, onQueue, share }: { onClose: () => void; o
         <Icon src={chevronDownIcon} size={26} />
       </button>
       <div className={s.stage}>
-        <div className={s.card}>
+        <div className={cx(s.card, menu && s.cardOpen)}>
           <Cover album={track.album} size="100%" className={s.cover} />
           <div className={s.shade} aria-hidden />
           <button type="button" className={cx(s.round, s.topRight)} aria-label={t('player.queue')} onClick={onQueue}>
             <Icon src={queueIcon} size={22} />
-          </button>
+            </button>
+          <button
+            type="button"
+            className={cx(s.round, s.topLeft, st.repeat !== 'off' && s.accent)}
+            aria-label={t(`player.repeat_${st.repeat}`)}
+            disabled={locked}
+            onClick={() => player.cycleRepeat()}
+          >
+            <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
+        </button>
           <div className={s.controls}>
             <button type="button" className={s.round} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
               <Icon src={prevIcon} size={22} />
@@ -83,19 +92,10 @@ export function FullPlayer({ onClose, onQueue, share }: { onClose: () => void; o
             <button type="button" className={s.round} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
               <Icon src={nextIcon} size={22} />
             </button>
-            <button
-              type="button"
-              className={cx(s.round, st.repeat !== 'off' && s.accent)}
-              aria-label={t(`player.repeat_${st.repeat}`)}
-              disabled={locked}
-              onClick={() => player.cycleRepeat()}
-            >
-              <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
-            </button>
           </div>
           <div className={s.moreWrap}>
             <button type="button" className={s.round} aria-label={t('player.more')} aria-expanded={menu} onClick={() => setMenu((v) => !v)}>
-              <Icon src={moreIcon} size={22} />
+              <Icon src={moreIcon} size={26} />
             </button>
             {menu && (
               <div className={s.menu}>