fix: header-responsiveness (#3381)

- when introducing dark mode icon in the header, on tablet the menu
items don't have enough space anymore, and this fix it

- fixing also the color for dark mode of the keyboard nav button "skip
to content"

frontend/src/component/common/SkipNavLink/SkipNavLink.tsx

@@ -1,5 +1,6 @@
 import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNavLink/SkipNavTarget';
 import { styled } from '@mui/material';
+import { focusable } from 'themes/themeStyles';
 
 const StyledLink = styled('a')(({ theme }) => ({
     position: 'fixed',
@@ -10,10 +11,11 @@ const StyledLink = styled('a')(({ theme }) => ({
     padding: theme.spacing(1, 2),
     whiteSpace: 'nowrap',
     textDecoration: 'none',
-    background: theme.palette.primary.dark,
-    color: theme.palette.primary.contrastText,
+    background: theme.palette.background.alternative,
+    color: theme.palette.common.white,
     borderRadius: theme.shape.borderRadius,
     fontSize: theme.fontSizes.smallBody,
+    ...focusable(theme),
 
     [theme.breakpoints.down(960)]: {
         top: '0.8rem',

frontend/src/component/menu/Header/Header.tsx

@@ -54,9 +54,7 @@ const StyledContainer = styled(Container)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     maxWidth: 1280,
-    [theme.breakpoints.down('md')]: {
-        padding: '0',
-    },
+    '&&&': { padding: 0 },
 }));
 
 const StyledUserContainer = styled('div')({