style: responsiveness

app/companies/AddCompany.tsx

@@ -43,7 +43,7 @@ const AddCompanyForm = ({ close }: { close: () => void }) => {
             <InfoCircledIcon style={{ marginBottom: "3px" }} />
           </Tooltip>
         </Flex>
-        <Flex direction="row" gap="1" align="center">
+        <Flex direction="row" gap="1" align="center" wrap="wrap">
           <Text>{SLUG_START}</Text>
           <TextField.Root name="slug" required value={slug} onChange={e => setSlug(e.target.value)} />
         </Flex>
@@ -68,7 +68,7 @@ export const AddCompany = () => {
   return (
     <GenericFormModal title="Add new company" description="Add a new company profile" form={AddCompanyForm}>
       <PlusButton>
-        <Text>Add Company</Text>
+        <Text>Company</Text>
       </PlusButton>
     </GenericFormModal>
   )

app/companies/CompanyAdminActions.tsx

@@ -9,9 +9,9 @@ export const CompanyAdminActions = () => {
   return (
     <RestrictedArea showMessage={false}>
       <Card variant="surface">
-        <Flex gap="3" direction="row" align="center" justify="between" p="2">
+        <Flex direction="row" align="center" justify="between" p="2">
           <Heading size="6">Admin Actions</Heading>
-          <Flex gap="3" direction="row" align="center">
+          <Flex direction="row" align="center">
             <AddCompany />
           </Flex>
         </Flex>

app/companies/[slug]/CompanyManagement.tsx

@@ -16,7 +16,7 @@ export const CompanyManagement = ({ company }: { company: CompanyProfile & { com
         <Flex direction="column" gap="3" p="4">
           <Flex gap="3" direction="row" align="center" justify="between" wrap={"wrap"}>
             <Heading size="6">Company Management</Heading>
-            <Flex gap="2">
+            <Flex gap="2" wrap="wrap">
               <AddUser key={company.id} company={company} />
               <DeleteCompany name={company.name} id={company.id} />
             </Flex>

components/EditCompany.tsx

@@ -55,7 +55,7 @@ const EditCompanyForm = ({ close, prevCompanyProfile }: { close: () => void; pre
             <InfoCircledIcon style={{ marginBottom: "3px" }} />
           </Tooltip>
         </Flex>
-        <Flex direction="row" gap="1" align="center">
+        <Flex direction="row" gap="1" align="center" wrap="wrap">
           <Text>{SLUG_START}</Text>
           <TextField.Root name="slug" required value={slug} onChange={e => setSlug(e.target.value)} />
         </Flex>

components/MdEditor.tsx

@@ -36,18 +36,18 @@ const MdEditor: FC<EditorProps> = ({ markdown, editorRef, onChange }) => {
       plugins={[
         toolbarPlugin({
           toolbarContents: () => (
-            <>
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
               {/* HACK: avoid unintented focus on the first button on hover*/}
               <button disabled style={{ display: "none" }}></button>
               <UndoRedo />
+              <Separator />
               <BoldItalicUnderlineToggles />
-              <BlockTypeSelect />
-              <CodeToggle />
               <InsertTable />
               <InsertThematicBreak />
               <Separator />
               <ListsToggle />
-            </>
+              <BlockTypeSelect />
+            </div>
           ),
         }),
         tablePlugin(),

components/UpsertEvent.tsx

@@ -15,6 +15,7 @@ import { Pencil1Icon } from "@radix-ui/react-icons"
 import { Card, Grid, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
 import { useState } from "react"
+import { useMediaQuery } from "react-responsive"
 
 const MdEditor = dynamic(() => import("@/components/MdEditor"), { ssr: false })
 
@@ -28,6 +29,8 @@ const UpsertEventForm = ({
   companyID?: number
 }) => {
   const [summary, setSummary] = useState(prevEvent?.richSummary ?? "")
+  const SMALL_SCREEN_PIXELS = 560
+  const isSmallScreen = useMediaQuery({ query: `(max-width: ${SMALL_SCREEN_PIXELS}px)` })
 
   const createEventWithArgs = async (prevState: FormPassBackState, formData: FormData) =>
     createEvent(prevState, formData, companyID ?? -1)
@@ -84,7 +87,7 @@ const UpsertEventForm = ({
         <TextField.Root name="spaces" placeholder="E.g., 100" required type="number" defaultValue={prevEvent?.spaces} />
       </label>
       <InfoCallout message={`The times correspond to the ${TIMEZONE} timezone.`} />
-      <Grid columns="2" rows="1">
+      <Grid columns={isSmallScreen ? "1" : "2"} rows={isSmallScreen ? "2" : "1"}>
         <label>
           <Text as="div" size="2" mb="1" weight="bold">
             Start date*