fixes

ui/snippets/navigation/NavigationDesktop.tsx

@@ -67,7 +67,7 @@ const NavigationDesktop = () => {
         alignItems="center"
         flexDirection="row"
         w="100%"
-        px={ isCollapsed ? '15px' : 3 }
+        px={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
         h={ 10 }
         { ...getDefaultTransitionProps({ transitionProperty: 'padding' }) }
       >

ui/snippets/networkMenu/NetworkLogo.tsx

-import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react';
+import { Icon, Box, Image, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
@@ -18,9 +18,11 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const href = link('network_index');
 
   const style = useColorModeValue({}, { filter: 'brightness(0) invert(1)' });
+  const isLg = useBreakpointValue({ base: false, lg: true, xl: false }, { ssr: true });
 
   const logoEl = (() => {
-    if (isCollapsed) {
+    const showSmallLogo = isCollapsed || (isCollapsed !== false && isLg);
+    if (showSmallLogo) {
       if (appConfig.network.smallLogo) {
         return (
           <Image
@@ -74,8 +76,8 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
     <Box
       as="a"
       href={ href }
-      width={{ base: 'auto', lg: isCollapsed === false ? '113px' : '30px' }}
-      height={ isCollapsed ? '30px' : '20px' }
+      width={{ base: 'auto', lg: isCollapsed === false ? '113px' : '30px', xl: isCollapsed ? '30px' : '113px' }}
+      height={{ base: '20px', lg: isCollapsed === false ? '20px' : '30px', xl: isCollapsed ? '30px' : '20px' }}
       display="inline-flex"
       overflow="hidden"
       onClick={ onClick }

ui/snippets/networkMenu/NetworkMenu.tsx

@@ -16,7 +16,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
             <Box
               marginLeft="auto"
               overflow="hidden"
-              width={ isCollapsed ? '0px' : 'auto' }
+              width={{ base: 'auto', lg: isCollapsed === false ? 'auto' : '0px', xl: isCollapsed ? '0px' : 'auto' }}
             >
               <NetworkMenuButton isActive={ isOpen }/>
             </Box>