fix(heo): prevent music player from overlapping footer (#4291)

* fix(heo): prevent music player from overlapping footer

* fix(heo): use class for footer player spacing

---------

Co-authored-by: tangly1024 <mail@tangly1024.com>

Author: ZZHow1024

themes/heo/components/Footer.js

@@ -11,6 +11,8 @@ const Footer = () => {
   const BEI_AN = siteConfig('BEI_AN')
   const BEI_AN_LINK = siteConfig('BEI_AN_LINK')
   const BIO = siteConfig('BIO')
+  const reserveMusicPlayerSpace =
+    siteConfig('MUSIC_PLAYER') && siteConfig('MUSIC_PLAYER_VISIBLE')
   return (
     <footer className='relative flex-shrink-0 bg-[var(--heo-color-card)] dark:bg-[var(--heo-color-bg-dark)] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'>
       {/* 颜色过度区 */}
@@ -29,14 +31,18 @@ const Footer = () => {
       {/* 底部页面信息 */}
       <div
         id='footer-bottom'
-        className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#21232A] border-t dark:border-t-[#3D3D3F]'>
+        className={`w-full min-h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#21232A] border-t dark:border-t-[#3D3D3F] ${
+          reserveMusicPlayerSpace ? 'pb-20' : ''
+        }`}
+      >
         <div id='footer-bottom-left' className='text-center lg:text-start'>
           <PoweredBy />
           <div className='flex gap-x-1'>
             <CopyRightDate />
             <a
               href={'/about'}
-              className='underline font-semibold dark:text-gray-300 '>
+              className='underline font-semibold dark:text-gray-300 '
+            >
               {siteConfig('AUTHOR')}
             </a>
             {BIO && <span className='mx-1'> | {BIO}</span>}