publish: improve responsivity on mobile

pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx

@@ -34,8 +34,8 @@ export function PostForm(props: PostFormProps) {
       p={[2, 4]}
       display="grid"
       justifyItems="start"
-      gridTemplateRows={["64px 64px 1fr", "64px 1fr"]}
-      gridTemplateColumns={["1fr", "1fr 1fr"]}
+      gridAutoRows="min-content"
+      gridTemplateColumns={["100%", "1fr 1fr"]}
       gridColumnGap={2}
       gridRowGap={2}
     >
@@ -46,12 +46,12 @@ export function PostForm(props: PostFormProps) {
       >
         <Form style={{ display: "contents" }}>
           <Input width="100%" placeholder="Post Title" id="title" />
-          <Box mt={1} justifySelf="end">
+          <Box gridRow={["1/2", "auto"]} mt={1} justifySelf={["start", "end"]}>
             <AsyncButton loadingText={loadingText} type="submit">
               {submitLabel}
             </AsyncButton>
           </Box>
-          <MarkdownField gridColumn="1/3" id="body" />
+          <MarkdownField gridColumn={["1/2", "1/3"]} id="body" />
         </Form>
       </Formik>
     </Box>

pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx

@@ -60,16 +60,16 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
       mx="auto"
       display="grid"
       gridAutoRows="min-content"
-      gridTemplateColumns={["1fr", "1fr 1fr"]}
+      gridTemplateColumns={["100%", "1fr 1fr"]}
       maxWidth="500px"
       gridRowGap={[4, 6]}
       gridColumnGap={3}
     >
-      <Box display={["block", "none"]} gridColumn={"1/3"}>
+      <Box display={["block", "none"]} gridColumn={["1/2", "1/3"]}>
         <Link to="/~publish">{"<- All Notebooks"}</Link>
       </Box>
       <Box>
-        {notebook?.title}
+        <Text> {notebook?.title}</Text>
         <br />
         <Text color="lightGray">by </Text>
         <Text fontFamily={contact?.nickname ? "sans" : "mono"}>

pkg/interface/src/views/apps/publish/components/lib/Settings.tsx

@@ -12,10 +12,11 @@ import {
   Center,
 } from "@tlon/indigo-react";
 import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
-import GlobalApi from "../../../../api/global";
-import { Notebook } from "../../../../types/publish-update";
-import { Contacts } from "../../../../types/contact-update";
-import { FormError } from "../../../../components/FormError";
+import GlobalApi from "~/logic/api/global";
+import { Notebook } from "~/types/publish-update";
+import { Contacts } from "~/types/contact-update";
+import { FormError } from "~/views/components/FormError";
+import { RouteComponentProps, useHistory } from "react-router-dom";
 
 interface SettingsProps {
   host: string;
@@ -48,6 +49,7 @@ const ResetOnPropsChange = (props: { init: FormSchema; book: string }) => {
 
 export function Settings(props: SettingsProps) {
   const { host, notebook, api, book } = props;
+  const history = useHistory();
   const initialValues: FormSchema = {
     name: notebook?.title,
     description: notebook?.about,
@@ -59,15 +61,8 @@ export function Settings(props: SettingsProps) {
     actions: FormikHelpers<FormSchema>
   ) => {
     try {
-      await api.publish.publishAction({
-        "edit-book": {
-          book,
-          title: values.name,
-          about: values.description,
-          coms: values.comments,
-          group: null,
-        },
-      });
+      const { name, description, comments } = values;
+      await api.publish.editBook(book, name, description, comments);
       api.publish.fetchNotebook(host, book);
       actions.setStatus({ success: null });
     } catch (e) {
@@ -76,6 +71,11 @@ export function Settings(props: SettingsProps) {
     }
   };
 
+  const onDelete = async () => {
+    await api.publish.delBook(book);
+    history.push("/~publish");
+  };
+
   return (
     <Formik
       validationSchema={formSchema}
@@ -94,9 +94,9 @@ export function Settings(props: SettingsProps) {
             <InputLabel>Delete Notebook</InputLabel>
             <InputCaption>
               Permanently delete this notebook. (All current members will no
-              longer see this notebook
+              longer see this notebook.)
             </InputCaption>
-            <Button mt={1} border error>
+            <Button onClick={onDelete} mt={1} border error>
               Delete this notebook
             </Button>
           </Col>