settings: format for mobile

Fixes urbit/landscape#496

pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx

@@ -5,7 +5,7 @@ import { Text } from '@tlon/indigo-react';
 export function BackButton(props: {}) {
   return (
     <Link to="/~settings">
-      <Text fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
+      <Text display={["block", "none"]} fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
     </Link>
   );
 }

pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx

@@ -75,6 +75,7 @@ export function CalmPrefs(props: {
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
         <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
+          <BackButton/>
           <Col gapY="1">
             <Text color="black" fontSize={2} fontWeight="medium">
               CalmEngine

pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx

@@ -13,6 +13,7 @@ import { S3State, BackgroundConfig } from "~/types";
 import { BackgroundPicker, BgType } from "./BackgroundPicker";
 import useSettingsState, { SettingsState, selectSettingsState } from "~/logic/state/settings";
 import {AsyncButton} from "~/views/components/AsyncButton";
+import { BackButton } from "./BackButton";
 
 const formSchema = Yup.object().shape({
   bgType: Yup.string()
@@ -87,6 +88,7 @@ export default function DisplayForm(props: DisplayFormProps) {
       {(props) => (
         <Form>
           <Col p="5" pt="4" gapY="5">
+            <BackButton/>
             <Col gapY="2">
               <Text color="black" fontSize={2} fontWeight="medium">
                 Display Preferences

pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx

@@ -75,6 +75,7 @@ export function LeapSettings(props: { api: GlobalApi; }) {
 
   return (
     <Col p="5" pt="4" gapY="5">
+      <BackButton/>
       <Col gapY="1">
         <Text fontSize="2" fontWeight="medium">
           Leap

pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx

@@ -52,6 +52,7 @@ export function NotificationPreferences(props: {
 
   return (
     <Col p="5" pt="4" gapY="5">
+      <BackButton/>
       <Col gapY="1">
         <Text fontSize="2" fontWeight="medium">
           Notification Preferences

pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx

@@ -64,6 +64,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
         >
           <Form>
             <Col maxWidth="600px" gapY="5">
+              <BackButton/>
               <Col gapY="1">
                 <Text color="black" fontSize={2} fontWeight="medium">
                   S3 Storage Setup

pkg/interface/src/views/apps/settings/components/lib/Security.tsx

@@ -8,6 +8,7 @@ import {
 } from "@tlon/indigo-react";
 
 import GlobalApi from "~/logic/api/global";
+import { BackButton } from "./BackButton";
 
 interface SecuritySettingsProps {
   api: GlobalApi;
@@ -17,6 +18,7 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
   const [allSessions, setAllSessions] = useState(false);
   return (
     <Col gapY="5" p="5" pt="4">
+      <BackButton/>
       <Col gapY="1">
         <Text fontSize={2} fontWeight="medium">
           Security Preferences

pkg/interface/src/views/apps/settings/settings.tsx

@@ -76,9 +76,10 @@ export default function SettingsScreen(props: any) {
             height="100%"
             borderRight="1"
             borderRightColor="washedGray"
-            display={["none", "flex"]}
+            display={hash === "" ? "flex" : ["none", "flex"]}
             minWidth="250px"
-            maxWidth="350px"
+            width="100%"
+            maxWidth={["100vw", "350px"]}
           >
             <Text
               display="block"