Share Link: font size setting

src/apps/link/LinkChat.tsx

@@ -72,9 +72,9 @@ export function LinkChat(props: { conversation: DConversation, storedAt: Date, e
       flexGrow: 1,
       backgroundColor: themeBgAppDarker,
       display: 'flex', flexFlow: 'column nowrap', minHeight: 96, alignItems: 'center',
-      gap: { xs: 4, md: 5, xl: 6 },
+      gap: { xs: 3, md: 5, xl: 6 },
       px: { xs: 2 },
-      py: { xs: 4, md: 5, xl: 6 },
+      py: { xs: 3, md: 5, xl: 6 },
     }}>
 
       {/* Title Card */}

src/apps/link/LinkChatMenuItems.tsx

@@ -4,9 +4,12 @@ import { shallow } from 'zustand/shallow';
 import { ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
+import { SettingContentScaling } from '../settings-modal/settings-ui/SettingContentScaling';
+
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 import { useChatShowSystemMessages } from '../chat/store-app-chat';
+import { useIsMobile } from '~/common/components/useMatchMedia';
 
 
 /**
@@ -20,6 +23,7 @@ export function LinkChatMenuItems(props: {
 }) {
 
   // external state
+  const isMobile = useIsMobile();
   const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
   const {
     renderMarkdown, setRenderMarkdown,
@@ -48,6 +52,8 @@ export function LinkChatMenuItems(props: {
 
   return <>
 
+    <SettingContentScaling noLabel />
+
     <MenuItem onClick={() => setShowSystemMessages(!showSystemMessages)} sx={{ justifyContent: 'space-between' }}>
       <Typography>
         System message
@@ -81,15 +87,17 @@ export function LinkChatMenuItems(props: {
       />
     </MenuItem>
 
-    <MenuItem onClick={props.onToggleDeletionKeys} sx={{ justifyContent: 'space-between' }}>
-      <Typography>
-        Show Keys
-      </Typography>
-      <Switch
-        checked={props.showDeletionKeys}
-        slotProps={{ endDecorator: { sx: { minWidth: 26 } } }}
-      />
-    </MenuItem>
+    {!isMobile && (
+      <MenuItem onClick={props.onToggleDeletionKeys} sx={{ justifyContent: 'space-between' }}>
+        <Typography>
+          Show Deletion Keys
+        </Typography>
+        <Switch
+          checked={props.showDeletionKeys}
+          slotProps={{ endDecorator: { sx: { minWidth: 26 } } }}
+        />
+      </MenuItem>
+    )}
 
     <ListDivider />
 

src/apps/settings-modal/settings-ui/SettingContentScaling.tsx

@@ -8,15 +8,17 @@ import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
-export function SettingContentScaling() {
+export function SettingContentScaling(props: { noLabel?: boolean }) {
 
   // external state
   const [contentScaling, setContentScaling] = useUIPreferencesStore(state => [state.contentScaling, state.setContentScaling], shallow);
 
   return (
-    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
-      <FormLabelStart title='Text Size'
-                      description={contentScaling === 'xs' ? 'Extra Small' : contentScaling === 'sm' ? 'Small' : 'Default'} />
+    <FormControl orientation='horizontal' sx={{ justifyContent: props.noLabel ? 'center' : 'space-between' }}>
+      {!props.noLabel && (
+        <FormLabelStart title='Text Size'
+                        description={contentScaling === 'xs' ? 'Extra Small' : contentScaling === 'sm' ? 'Small' : 'Default'} />
+      )}
       <Stepper sx={{
         maxWidth: 160,
         width: '100%',