feat: Enhance mobile UI responsiveness and layout for ChannelsTable and SiderBar

web/src/components/Footer.js

@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getFooterHTML, getSystemName } from '../helpers';
 import { Layout, Tooltip } from '@douyinfe/semi-ui';
+import { StyleContext } from '../context/Style/index.js';
 
 const FooterBar = () => {
   const { t } = useTranslation();
   const systemName = getSystemName();
   const [footer, setFooter] = useState(getFooterHTML());
+  const [styleState] = useContext(StyleContext);
   let remainCheckTimes = 5;
 
   const loadFooter = () => {
@@ -57,7 +59,10 @@ const FooterBar = () => {
   }, []);
 
   return (
-    <div style={{ textAlign: 'center' }}>
+    <div style={{
+      textAlign: 'center',
+      paddingBottom: styleState?.isMobile ? '112px' : '5px',
+    }}>
       {footer ? (
         <div
           className='custom-footer'