Make the react app usable on mobile devices/small screens, and clean up theme code (#167)

* Fix UI resizing as text comes in

* Get rid of unneeded font size theme code

* Get rid of zIndex hacks that we used for chrome extension

* Get rid of minHeight to remove empty bar at bottom

* WIP try to get font to shrink

* Get responsive font size working

* Wrap the volume slider for narrow vieports

* Make input source row evenly spaced

streaming-react-app/src/StreamingInterface.css

@@ -16,10 +16,6 @@
   border-radius: 8px;
   box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(0, 0, 0, 0.05);
-  min-height: 300px;
-  /* max-height: 95vh; */
-  /* max-width: 625px; */
-  /* min-width: 580px; */
   overflow: hidden;
 }
 

streaming-react-app/src/StreamingInterface.tsx

@@ -59,6 +59,7 @@ import {getURLParams} from './URLParams';
 import debug from './debug';
 import DebugSection from './DebugSection';
 import Switch from '@mui/material/Switch';
+import {Grid} from '@mui/material';
 
 const AUDIO_STREAM_DEFAULTS: {
   [key in SupportedInputSource]: BrowserAudioStreamConfig;
@@ -754,8 +755,7 @@ export default function StreamingInterface() {
       <Box
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore Not sure why it's complaining about complexity here
-        minWidth={'550px'}
-        maxWidth={'660px'}>
+        sx={{width: '100%', maxWidth: '660px', minWidth: '320px'}}>
         <div className="main-container-sra">
           <div className="top-section-sra horizontal-padding-sra">
             <div className="header-container-sra">
@@ -881,74 +881,83 @@ export default function StreamingInterface() {
                       </FormControl>
                     </Box>
 
-                    <Stack direction="row" spacing={3.5}>
-                      <FormControl disabled={streamFixedConfigOptionsDisabled}>
-                        <RadioGroup
-                          aria-labelledby="output-modes-radio-group-label"
-                          value={outputMode}
-                          onChange={(e) =>
-                            setOutputMode(e.target.value as SupportedOutputMode)
-                          }
-                          name="output-modes-radio-buttons-group">
-                          {
-                            // TODO: Use supported modalities from agentCapabilities
-                            SUPPORTED_OUTPUT_MODES.map(({value, label}) => (
-                              <FormControlLabel
-                                key={value}
-                                value={value}
-                                control={<Radio />}
-                                label={label}
-                              />
-                            ))
-                          }
-                        </RadioGroup>
-                      </FormControl>
-
-                      <Stack
-                        direction="column"
-                        spacing={1}
-                        alignItems="flex-start"
-                        sx={{flexGrow: 1}}>
-                        {currentAgent?.dynamicParams?.includes(
-                          'expressive',
-                        ) && (
-                          <FormControlLabel
-                            control={
-                              <Switch
-                                checked={enableExpressive ?? false}
-                                onChange={(
-                                  event: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  const newValue = event.target.checked;
-                                  setEnableExpressive(newValue);
-                                  onSetDynamicConfig({expressive: newValue});
-                                }}
-                              />
+                    <Grid container>
+                      <Grid item xs={12} sm={4}>
+                        <FormControl
+                          disabled={streamFixedConfigOptionsDisabled}>
+                          <RadioGroup
+                            aria-labelledby="output-modes-radio-group-label"
+                            value={outputMode}
+                            onChange={(e) =>
+                              setOutputMode(
+                                e.target.value as SupportedOutputMode,
+                              )
+                            }
+                            name="output-modes-radio-buttons-group">
+                            {
+                              // TODO: Use supported modalities from agentCapabilities
+                              SUPPORTED_OUTPUT_MODES.map(({value, label}) => (
+                                <FormControlLabel
+                                  key={value}
+                                  value={value}
+                                  control={<Radio />}
+                                  label={label}
+                                />
+                              ))
                             }
-                            label="Expressive"
-                          />
-                        )}
-
-                        {isListener && (
-                          <Box
-                            sx={{
-                              flexGrow: 1,
-                              paddingX: 1.5,
-                              paddingY: 1.5,
-                              width: '100%',
-                            }}>
-                            {volumeSliderNode}
-                          </Box>
-                        )}
-                      </Stack>
-                    </Stack>
+                          </RadioGroup>
+                        </FormControl>
+                      </Grid>
+
+                      <Grid item xs={12} sm={8}>
+                        <Stack
+                          direction="column"
+                          spacing={1}
+                          alignItems="flex-start"
+                          sx={{flexGrow: 1}}>
+                          {currentAgent?.dynamicParams?.includes(
+                            'expressive',
+                          ) && (
+                            <FormControlLabel
+                              control={
+                                <Switch
+                                  checked={enableExpressive ?? false}
+                                  onChange={(
+                                    event: React.ChangeEvent<HTMLInputElement>,
+                                  ) => {
+                                    const newValue = event.target.checked;
+                                    setEnableExpressive(newValue);
+                                    onSetDynamicConfig({
+                                      expressive: newValue,
+                                    });
+                                  }}
+                                />
+                              }
+                              label="Expressive"
+                            />
+                          )}
+
+                          {isListener && (
+                            <Box
+                              sx={{
+                                flexGrow: 1,
+                                paddingX: 1.5,
+                                paddingY: 1.5,
+                                width: '100%',
+                              }}>
+                              {volumeSliderNode}
+                            </Box>
+                          )}
+                        </Stack>
+                      </Grid>
+                    </Grid>
                   </Stack>
 
                   <Stack
                     direction="row"
                     spacing={2}
                     justifyContent="space-between">
-                    <div>
+                    <Box sx={{flex: 1}}>
                       <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel id="input-source-radio-group-label">
                           Input Source
@@ -972,8 +981,8 @@ export default function StreamingInterface() {
                           ))}
                         </RadioGroup>
                       </FormControl>
-                    </div>
-                    <div>
+                    </Box>
+                    <Box sx={{flex: 1}}>
                       <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel>Options</FormLabel>
                         <FormControlLabel
@@ -1022,7 +1031,7 @@ export default function StreamingInterface() {
                           label="Server Debug Flag"
                         />
                       </FormControl>
-                    </div>
+                    </Box>
                   </Stack>
 
                   <Stack direction="row" spacing={2}>

streaming-react-app/src/theme.ts

@@ -1,27 +1,4 @@
 import {createTheme} from '@mui/material/styles';
-// import {red} from '@mui/material/colors';
-
-const Z_INDEX_BASE = 9999999;
-
-function getHtmlFontSize(): number | null {
-  let fontSize: number | null = null;
-  try {
-    // NOTE: Even when this is not explicitly set it still returns a value
-    const fontSizeString = window
-      .getComputedStyle(document.getElementsByTagName('html')[0])
-      .getPropertyValue('font-size');
-    fontSize = parseInt(fontSizeString, 10);
-  } catch (e) {
-    console.error('Error getting font size', e);
-  }
-
-  return fontSize;
-}
-
-const htmlFontSize = getHtmlFontSize();
-
-const htmlFontSizeObject =
-  htmlFontSize == null ? {} : {htmlFontSize: htmlFontSize};
 
 const themeObject = {
   palette: {
@@ -35,7 +12,6 @@ const themeObject = {
     text: {primary: '#1C2A33'},
   },
   typography: {
-    ...htmlFontSizeObject,
     fontFamily: [
       'Optimistic Text',
       'Roboto',
@@ -43,26 +19,22 @@ const themeObject = {
       'Arial',
       'sans-serif',
     ].join(','),
-    h1: {fontSize: 16, fontWeight: '500'},
-    body1: {fontSize: 16},
-  },
-  // Because our chrome extension uses a high z-index, we need to
-  // provide that base here so MUI stuff renders correctly
-  zIndex: {
-    mobileStepper: Z_INDEX_BASE + 1000,
-    fab: Z_INDEX_BASE + 1050,
-    speedDial: Z_INDEX_BASE + 1050,
-    appBar: Z_INDEX_BASE + 1100,
-    drawer: Z_INDEX_BASE + 1200,
-    modal: Z_INDEX_BASE + 1300,
-    snackbar: Z_INDEX_BASE + 1400,
-    tooltip: Z_INDEX_BASE + 1500,
+    h1: {fontSize: '1rem', fontWeight: '500'},
   },
 };
 
-console.log('themeObject', themeObject);
-
-// A custom theme for this app
 const theme = createTheme(themeObject);
 
+/**
+ * Set up a responsive font size at the 600px breakpoint
+ */
+// default is 1rem (16px)
+theme.typography.body1[theme.breakpoints.down('sm')] = {fontSize: '0.875rem'};
+// default is 1rem (16px)
+theme.typography.h1[theme.breakpoints.down('sm')] = {fontSize: '0.875rem'};
+// default is 0.875rem (14px)
+theme.typography.button[theme.breakpoints.down('sm')] = {fontSize: '0.75rem'};
+// default is 0.875rem (14px)
+theme.typography.body2[theme.breakpoints.down('sm')] = {fontSize: '0.75rem'};
+
 export default theme;