fix: mobile dev page and popup style

DimensionDev · Oct 10, 2019 · c5ab054 · c5ab054
1 parent cddff6e
commit c5ab054
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/extension/options-page/Developer.tsx b/src/extension/options-page/Developer.tsx
@@ -66,9 +66,10 @@ const DevPage = () => {
         <>
             <ListSubheader>Developer Settings</ListSubheader>
             <div className={classes.root}>
+                <List>{useSettingsUI(debugModeSetting)}</List>
                 <List>{useSettingsUI(disableOpenNewTabInBackgroundSettings)}</List>
                 <Grid container spacing={2}>
-                    <Grid container xs={6} item spacing={2} direction="column">
+                    <Grid container xs={12} lg={6} item spacing={2} direction="column">
                         <Grid item>
                             <SeeMyProvePost />
                         </Grid>
@@ -79,8 +80,8 @@ const DevPage = () => {
                             <DecryptPostDeveloperMode />
                         </Grid>
                     </Grid>
-                    <Grid container xs={6} item spacing={2} direction="column">
-                        <Grid item>
+                    <Grid container xs={12} lg={6} item spacing={2} direction="column">
+                        <Grid xs={12} item>
                             <FriendsDeveloperMode />
                         </Grid>
                     </Grid>

diff --git a/src/extension/popup-page/index.tsx b/src/extension/popup-page/index.tsx
@@ -32,15 +32,15 @@ const useStyles = makeStyles(theme => ({
 SSRRenderer(<Popup />)
 export function Popup() {
     const classes = useStyles()
-    const debugOn = useValueRef(debugModeSetting)
 
     return (
         <ThemeProvider theme={MaskbookLightTheme}>
             <style>{`
     body {
         overflow-x: hidden;
         margin: 0 auto;
-        min-width: 30em;
+        width: 30em;
+        max-width: 100%;
     }`}</style>
             <main className={classes.container}>
                 <img className={classes.logo} src="https://dimensiondev.github.io/Maskbook-VI/MB--Text--Blue.svg" />

diff --git a/src/index.tsx b/src/index.tsx
@@ -98,6 +98,7 @@ const useStyles = makeStyles<Theme>(theme =>
         },
         content: {
             flexGrow: 1,
+            width: '100%',
         },
     }),
 )