PWA fullscreen by default

src/apps/settings/UISettings.tsx

@@ -8,6 +8,7 @@ import WidthNormalIcon from '@mui/icons-material/WidthNormal';
 import WidthWideIcon from '@mui/icons-material/WidthWide';
 
 import { hideOnMobile, settingsGap } from '~/common/theme';
+import { isPwa } from '~/common/util/pwaUtils';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 // languages is defined as a JSON file
@@ -87,7 +88,7 @@ export function UISettings() {
 
     <Stack direction='column' sx={{ gap: settingsGap }}>
 
-      <FormControl orientation='horizontal' sx={{ ...hideOnMobile, alignItems: 'center', justifyContent: 'space-between' }}>
+      {!isPwa() && <FormControl orientation='horizontal' sx={{ ...hideOnMobile, alignItems: 'center', justifyContent: 'space-between' }}>
         <Box>
           <FormLabel>Centering</FormLabel>
           <FormHelperText>{centerMode === 'full' ? 'Full screen chat' : centerMode === 'narrow' ? 'Narrow chat' : 'Wide'}</FormHelperText>
@@ -97,7 +98,7 @@ export function UISettings() {
           <Radio value='wide' label={<WidthWideIcon sx={{ width: 25, height: 24, mt: -0.25 }} />} />
           <Radio value='full' label='Full' />
         </RadioGroup>
-      </FormControl>
+      </FormControl>}
 
       <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
         <Box>

src/common/layouts/AppLayout.tsx

@@ -6,6 +6,7 @@ import { Box, Container, useTheme } from '@mui/joy';
 import { Configurator } from '~/modules/llms/configurator/Configurator';
 import { SettingsModal } from '../../apps/settings/SettingsModal';
 
+import { isPwa } from '~/common/util/pwaUtils';
 import { useAppStateStore } from '~/common/state/store-appstate';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
@@ -19,7 +20,7 @@ export function AppLayout(props: {
 }) {
   // external state
   const theme = useTheme();
-  const { centerMode } = useUIPreferencesStore(state => ({ centerMode: state.centerMode }), shallow);
+  const { centerMode } = useUIPreferencesStore(state => ({ centerMode: isPwa() ? 'full' : state.centerMode }), shallow);
 
   // Usage++ (for progressive disclosure of features)
   const incrementUsage = useAppStateStore((state) => state.incrementUsage);

src/common/util/pwaUtils.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns 'true' if the application is been executed as a 'pwa' (e.g. installed, stand-alone)
+ */
+export const isPwa = (): boolean => {
+  if (typeof window !== 'undefined')
+    return window.matchMedia('(display-mode: standalone)').matches;
+  return false;
+};