Extension popup looks less horrible on mobile

killergerbah · Feb 4, 2024 · 5128364 · 5128364
1 parent bce6411
commit 5128364
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/common/components/SettingsForm.tsx b/common/components/SettingsForm.tsx
@@ -944,6 +944,7 @@ export default function SettingsForm({
                 value={tabIndex}
                 className={classes.tabs}
                 onChange={(event, index) => setTabIndex(index)}
+                style={{ maxWidth: '100vw' }}
             >
                 <Tab tabIndex={0} label={t('settings.anki')} id="anki-settings" />
                 <Tab tabIndex={1} label={t('settings.mining')} id="mining-settings" />

diff --git a/extension/src/ui/components/Popup.tsx b/extension/src/ui/components/Popup.tsx
@@ -13,6 +13,7 @@ import { useLocalFontFamilies } from '@project/common/hooks';
 import { Anki } from '@project/common/anki';
 import { useSupportedLanguages } from '../hooks/use-supported-languages';
 import { useI18n } from '../hooks/use-i18n';
+import { isMobile } from 'react-device-detect';
 
 interface Props {
     settings: AsbplayerSettings;
@@ -63,8 +64,8 @@ const Popup = ({
     }
 
     return (
-        <Grid container direction="column" spacing={1} style={{ width: 500 }}>
-            <Grid item>
+        <Grid container direction="column" spacing={0}>
+            <Grid item style={{ marginLeft: 16, marginTop: 16, marginRight: 16 }}>
                 <Button
                     variant="contained"
                     color="secondary"
@@ -75,7 +76,7 @@ const Popup = ({
                     {t('action.openApp')}
                 </Button>
             </Grid>
-            <Grid item>
+            <Grid item style={{ marginLeft: 16, marginTop: 8, marginRight: 16 }}>
                 <Button
                     variant="contained"
                     color="secondary"
@@ -86,11 +87,11 @@ const Popup = ({
                     {t('action.openSidePanel')}
                 </Button>
             </Grid>
-            <Grid item style={{ height: 450 }}>
+            <Grid item style={{ height: isMobile ? 'auto' : 450, marginTop: 8 }}>
                 <SettingsForm
                     extensionInstalled
                     extensionSupportsAppIntegration
-                    forceVerticalTabs
+                    forceVerticalTabs={false}
                     anki={anki}
                     chromeKeyBinds={chromeCommandBindsToKeyBinds(commands)}
                     settings={settings}

diff --git a/extension/src/ui/components/PopupUi.tsx b/extension/src/ui/components/PopupUi.tsx
@@ -15,6 +15,7 @@ import Typography from '@material-ui/core/Typography';
 import { ExtensionSettingsStorage } from '../../services/extension-settings-storage';
 import Popup from './Popup';
 import { useRequestingActiveTabPermission } from '../hooks/use-requesting-active-tab-permission';
+import { isMobile } from 'react-device-detect';
 
 interface Props {
     commands: any;
@@ -84,8 +85,8 @@ export function PopupUi({ commands }: Props) {
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline />
-            <Paper square>
-                <Box p={2}>
+            <Paper square elevation={0} style={{ width: isMobile ? '100%' : 600 }}>
+                <Box>
                     <Popup
                         commands={commands}
                         settings={settings}