fix: drawer for mobile view

src/client/component/contentinfo.tsx

@@ -97,6 +97,7 @@ export const ContentInfo = (props: {
         [theme.breakpoints.down("sm")]: {
             flexDirection: "column",
             alignItems: "center",
+            height: "auto",
         }
     }} elevation={4}>
         <Link /*className={propclasses.thumbnail_anchor ?? thumbnail_anchor}*/ component={RouterLink} to={{

src/client/component/headline.tsx

@@ -57,11 +57,18 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
     },
 }));
 
+const StyledNav = styled('nav')(({theme}) => ({
+    [theme.breakpoints.up("sm")]: {
+        width: theme.spacing(7)
+    }
+}));
+
 const closedMixin = (theme: Theme) => ({
     overflowX: 'hidden',
     width: `calc(${theme.spacing(7)} + 1px)`,
 });
 
+
 export const Headline = (prop: {
     children?: React.ReactNode,
     classes?: {
@@ -169,7 +176,7 @@ export const Headline = (prop: {
             </Toolbar>
         </AppBar>
         {renderProfileMenu}
-        <nav style={{ width: theme.spacing(7) }}>
+        <StyledNav>
             <Hidden smUp implementation="css">
                 <StyledDrawer variant="temporary" anchor='left' open={v} onClose={toggleV}
                     sx={{
@@ -179,7 +186,7 @@ export const Headline = (prop: {
                     {drawer_contents}
                 </StyledDrawer>
             </Hidden>
-            <Hidden xsDown implementation="css">
+            <Hidden smDown implementation="css">
                 <StyledDrawer variant='permanent' anchor='left'
                     sx={{
                         ...closedMixin(theme),
@@ -188,7 +195,7 @@ export const Headline = (prop: {
                     {drawer_contents}
                 </StyledDrawer>
             </Hidden>
-        </nav>
+        </StyledNav>
         <main style={{
             display: 'flex',
             flexFlow: 'column',