fix linting error, fix header responsiveness in non-english languages, try to...

fix linting error, fix header responsiveness in non-english languages, try to fix the background color issue on safari

src/components/Header/index.tsx

@@ -52,8 +52,7 @@ const HeaderFrame = styled.div<{ showBackground: boolean }>`
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding:  1rem;
-    grid-template-columns: 120px 1fr;
-
+    grid-template-columns: auto 1fr;
   `};
 
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
@@ -226,6 +225,7 @@ const StyledNavLink = styled(NavLink).attrs({
   width: fit-content;
   font-weight: 500;
   padding: 8px 12px;
+  word-break: break-word;
 
   &.${activeClassName} {
     border-radius: 12px;

src/index.css

@@ -45,6 +45,10 @@ html {
     z-index: -1;
 }
 
+html {
+    min-height: 100%;
+}
+
 @media (prefers-color-scheme: dark) {
     html {
         background-color: #212429;

src/pages/App.tsx

-import React, { Suspense } from 'react'
+import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'

src/theme/index.tsx

@@ -191,7 +191,7 @@ export const TYPE = {
 export const ThemedGlobalStyle = createGlobalStyle`
 html {
   color: ${({ theme }) => theme.text1};
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.bg1} !important;
 }
 
 a {