Fix header display issues in mobile device

frontend/src/App/Header.tsx

@@ -23,7 +23,7 @@ import { useIsOffline } from "../@redux/hooks/site";
 import logo from "../@static/logo64.png";
 import { SystemApi } from "../apis";
 import { ActionButton, SearchBar, SearchResult } from "../components";
-import { useGotoHomepage } from "../utilites";
+import { useGotoHomepage, useIsMobile } from "../utilites";
 import "./header.scss";
 import NotificationCenter from "./Notification";
 
@@ -59,6 +59,8 @@ const Header: FunctionComponent<Props> = () => {
 
   const offline = useIsOffline();
 
+  const isMobile = useIsMobile();
+
   const serverActions = useMemo(
     () => (
       <Dropdown alignRight>
@@ -114,7 +116,7 @@ const Header: FunctionComponent<Props> = () => {
       </Button>
       <Container fluid>
         <Row noGutters className="flex-grow-1">
-          <Col xs={6} sm={4} className="d-flex align-items-center">
+          <Col xs={4} sm={6} className="d-flex align-items-center">
             <SearchBar onSearch={SearchItem}></SearchBar>
           </Col>
           <Col className="d-flex flex-row align-items-center justify-content-end pr-2">
@@ -133,7 +135,7 @@ const Header: FunctionComponent<Props> = () => {
                 variant="warning"
                 icon={faNetworkWired}
               >
-                Connecting...
+                {isMobile ? "" : "Connecting..."}
               </ActionButton>
             ) : (
               serverActions

frontend/src/App/notification.scss

@@ -20,12 +20,11 @@
   }
 
   .dropdown-menu {
-    max-width: 20rem;
     max-height: 85vh;
     overflow-y: auto;
   }
 
-  $content-width: 16rem;
+  $content-width: 14rem;
 
   .notification-center-progress {
     width: $content-width;

frontend/src/utilites/hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
 import { useHistory } from "react-router";
-import { useDidUpdate } from "rooks";
+import { useDidUpdate, useMediaMatch } from "rooks";
 import { getBaseUrl } from ".";
 
 export function useBaseUrl(slash: boolean = false) {
@@ -28,6 +28,10 @@ export function useHasUpdateInject() {
   }
 }
 
+export function useIsMobile() {
+  return useMediaMatch("(max-width: 576px)");
+}
+
 export function useIsArrayExtended(arr: any[]) {
   const [size, setSize] = useState(arr.length);
   const [isExtended, setExtended] = useState(arr.length !== 0);