style: improve responsive design

src/components/Dashboard/ProgressBar/ProgressBar.tsx

@@ -86,6 +86,11 @@ const StyledProgressBar = styled.section`
 const ProgressHeader = styled.div`
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 8px;
+  }
 `
 
 const EpochLabel = styled.span`

src/components/Header/Navbar/Navbar.tsx

@@ -1,4 +1,3 @@
-import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -20,17 +19,21 @@ const Navbar: React.FC<NavbarProps> = () => {
 const Navigation = styled.ul`
   display: flex;
   align-items: center;
-  /* position: absolute;
+  position: absolute;
   left: 50%;
-  transform: translateX(-50%); */
+  transform: translateX(-50%);
   gap: 37px;
   list-style-type: none;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: 1300px) {
     position: static;
     transform: none;
     flex-wrap: wrap;
   }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `
 
 const NavItem = styled.li<{ active?: boolean }>`

src/layouts/DashboardLayout/Dashboard.layout.tsx

@@ -23,7 +23,7 @@ const Container = styled.div`
   max-width: ${uiConfigs.maxContainerWidth}px;
 
   margin: 0 auto;
-  padding: 24px;
+  padding: 24px 0;
 
   @media (max-width: ${breakpoints.md}px) {
     padding: 0 20px;

src/pages/_app.tsx

@@ -87,6 +87,13 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
             padding: 0;
             word-break: keep-all;
           }
+
+          ul,
+          li {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+          }
         `}
       />
       {getLayout(<Component {...pageProps} />)}