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

@@ -11,7 +11,7 @@ export const CompanyAdminActions = () => {
       <Card style={{ width: "100%" }} variant="surface">
         <Flex gap="3" 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>

app/companies/[slug]/page.tsx

@@ -185,7 +185,7 @@ const CompanyPage = async ({ params }: { params: { slug: string } }) => {
           <Tabs.Content value="opportunities">
             <RestrictedAreaCompany companyId={companyProfile.id} showMessage={false}>
               <Card variant="surface" className={styles.opportunityPanel}>
-                <Flex gap="3" direction="row" align="center" justify="between" p="2">
+                <Flex gap="3" direction="row" align="center" justify="between" p="2" wrap="wrap">
                   <Heading size="6">Opportunities panel</Heading>
                   <Flex gap="3" direction="row" align="center">
                     <AddOpportunity companyID={companyProfile.id} />

app/events/[id]/FormattedClientDateTime.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { Flex, Spinner, Text } from "@radix-ui/themes"
+import { format, formatDistanceStrict, isSameDay } from "date-fns"
+import React, { useEffect, useState } from "react"
+import { BsCalendar } from "react-icons/bs"
+
+/**
+ * Format an event's date to JSX
+ * @param dateStart The start date time
+ * @param dateEnd The end date time
+ * @example
+ *   formatEventDateTime(
+ *     new Date("2022-01-01T12:00:00Z"),
+ *     new Date("2022-01-01T14:00:00Z")
+ *   ) =>
+ *     <>
+ *       <b><time>Sat, 01 Jan 12:00</time></b>-<b><time>14:00</time></b> GMT+0 (2 hours)
+ *     </>
+ * @example
+ *   formatEventDateTime(
+ *     new Date("2022-01-01T12:00:00Z"),
+ *     new Date("2022-01-02T14:00:00Z")
+ *   ) =>
+ *   <>
+ *     <b><time>Sat, 01 Jan 12:00</time></b> to <b><time>Sun, 02 Jan 14:00</time></b> GMT+0 (1 day)
+ *   </>
+ */
+const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => {
+  const formattedStart = (
+    <b>
+      <time>{format(dateStart, "E, dd MMM kk:mm")}</time>
+    </b>
+  )
+  const formattedEnd = dateEnd ? (
+    isSameDay(dateStart, dateEnd) ? (
+      <>
+        -
+        <b>
+          <time>{format(dateEnd, "kk:mm")}</time>
+        </b>
+      </>
+    ) : (
+      <>
+        {" "}
+        to{" "}
+        <b>
+          <time>{format(dateEnd, "E, dd MMM kk:mm")}</time>
+        </b>
+      </>
+    )
+  ) : (
+    ""
+  )
+  const timezone = format(dateStart, "O")
+  const formattedDuration = dateEnd ? <>{formatDistanceStrict(dateStart, dateEnd)}</> : ""
+
+  return (
+    <>
+      {formattedStart}
+      {formattedEnd} {timezone} ({formattedDuration})
+    </>
+  )
+}
+
+const FormattedClientDateTime = ({ dateStart, dateEnd }: { dateStart: Date; dateEnd: Date | null }) => {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  if (!isClient) {
+    return (
+      <Flex direction="row" gap="3">
+        <Spinner />
+        Loading
+      </Flex>
+    )
+  }
+  return (
+    <Flex align="center" gap="2">
+      <BsCalendar />
+      <Text>{formatEventDateTime(dateStart, dateEnd)}</Text>
+    </Flex>
+  )
+}
+
+export default FormattedClientDateTime

app/events/[id]/page.tsx

@@ -5,66 +5,18 @@ import Link from "@/components/Link"
 import MdViewer from "@/components/MdViewer"
 import { EditEvent } from "@/components/UpsertEvent"
 import RestrictedAreaCompany from "@/components/rbac/RestrictedAreaCompany"
-import RestrictedAreaStudent from "@/components/rbac/RestrictedAreaStudent"
 import prisma from "@/lib/db"
 
+import FormattedClientDateTime from "./FormattedClientDateTime"
 import styles from "./page.module.scss"
 
 import { Role } from "@prisma/client"
 import { Box, Button, Card, Flex, Heading, Inset, Separator, Text } from "@radix-ui/themes"
-import { format, formatDistanceStrict, isSameDay } from "date-fns"
+import { format } from "date-fns"
 import Image from "next/image"
 import { notFound } from "next/navigation"
 import React from "react"
-import { BsBoxArrowUpRight, BsCalendar, BsPinMap } from "react-icons/bs"
-
-/**
- * Format an event's date to JSX
- * @param dateStart The start date time
- * @param dateEnd The end date time
- * @example
- *   formatEventDateTime(
- *     new Date("2022-01-01T12:00:00Z"),
- *     new Date("2022-01-01T14:00:00Z")
- *   ) =>
- *     <>
- *       <b>Sat, 01 Jan 12:00</b>-<b>14:00</b> GMT+0 (2 hours)
- *     </>
- * @example
- *   formatEventDateTime(
- *     new Date("2022-01-01T12:00:00Z"),
- *     new Date("2022-01-02T14:00:00Z")
- *   ) =>
- *   <>
- *     <b>Sat, 01 Jan 12:00</b> to <b>Sun, 02 Jan 14:00</b> GMT+0 (1 day)
- *   </>
- */
-const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => {
-  const formattedStart = <b>{format(dateStart, "E, dd MMM kk:mm")}</b>
-  const formattedEnd = dateEnd ? (
-    isSameDay(dateStart, dateEnd) ? (
-      <>
-        -<b>{format(dateEnd, "kk:mm")}</b>
-      </>
-    ) : (
-      <>
-        {" "}
-        to <b>{format(dateEnd, "E, dd MMM kk:mm")}</b>
-      </>
-    )
-  ) : (
-    ""
-  )
-  const timezone = format(dateStart, "O")
-  const formattedDuration = dateEnd ? <>{formatDistanceStrict(dateStart, dateEnd)}</> : ""
-
-  return (
-    <>
-      {formattedStart}
-      {formattedEnd} {timezone} ({formattedDuration})
-    </>
-  )
-}
+import { BsBoxArrowUpRight, BsPinMap } from "react-icons/bs"
 
 const EventPage = async ({ params }: { params: { id: string } }) => {
   const session = await auth()
@@ -141,8 +93,7 @@ const EventPage = async ({ params }: { params: { id: string } }) => {
           <Heading>Date & Time</Heading>
 
           <Flex align="center" gap="2">
-            <BsCalendar />
-            <Text>{formatEventDateTime(event.dateStart, event.dateEnd)}</Text>
+            <FormattedClientDateTime dateStart={event.dateStart} dateEnd={event.dateEnd} />
           </Flex>
         </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

@@ -3,7 +3,6 @@
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
-  CodeToggle,
   InsertTable,
   InsertThematicBreak,
   ListsToggle,
@@ -13,7 +12,6 @@ import {
   UndoRedo,
   headingsPlugin,
   listsPlugin,
-  quotePlugin,
   tablePlugin,
   thematicBreakPlugin,
   toolbarPlugin,
@@ -38,25 +36,24 @@ const MdEditor: FC<EditorProps> = ({ markdown, editorRef, onChange }) => {
       plugins={[
         toolbarPlugin({
           toolbarContents: () => (
-            <>
-              {/* HACK: avoid unintented focus on the first button on hover*/}
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
+              {/* HACK: avoid unintended 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(),
         thematicBreakPlugin(),
         listsPlugin(),
         headingsPlugin(),
-        quotePlugin(),
       ]}
       markdown={markdown}
       ref={editorRef}

components/UpsertEvent.tsx

@@ -12,9 +12,9 @@ import { InfoCallout } from "./Callouts"
 
 import { Event } from "@prisma/client"
 import { Pencil1Icon } from "@radix-ui/react-icons"
-import { Card, Grid, IconButton, Text, TextField } from "@radix-ui/themes"
+import { Card, Flex, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
-import { useState } from "react"
+import React, { useState } from "react"
 
 const MdEditor = dynamic(() => import("@/components/MdEditor"), { ssr: false })
 
@@ -84,8 +84,8 @@ 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">
-        <label>
+      <Flex justify="start" wrap="wrap" gapY="3">
+        <label style={{ flexGrow: 1 }}>
           <Text as="div" size="2" mb="1" weight="bold">
             Start date*
           </Text>
@@ -96,13 +96,13 @@ const UpsertEventForm = ({
             required
           />
         </label>
-        <label>
+        <label style={{ flexGrow: 1 }}>
           <Text as="div" size="2" mb="1" weight="bold">
             End date
           </Text>
           <DateTimePicker name="dateEnd" placeholder="Enter end date here" defaultDate={prevEvent?.dateEnd} />
         </label>
-      </Grid>
+      </Flex>
       <label>
         <Text as="div" size="2" mb="1" weight="bold">
           Summary*
@@ -144,7 +144,7 @@ export const AddEvent = ({ companyID }: { companyID: number }) => {
   return (
     <UpsertEvent companyID={companyID}>
       <PlusButton>
-        <Text>Add Event</Text>
+        <Text>Event</Text>
       </PlusButton>
     </UpsertEvent>
   )

components/UpsertOpportunity.tsx

@@ -12,7 +12,7 @@ import { Opportunity, OpportunityType } from "@prisma/client"
 import { Pencil1Icon } from "@radix-ui/react-icons"
 import { Card, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
-import { useState } from "react"
+import React, { useState } from "react"
 
 const defaultOpportunityType = OpportunityType.Internship
 
@@ -134,7 +134,7 @@ export const AddOpportunity = ({ companyID }: { companyID: number }) => {
   return (
     <UpsertOpportunity companyID={companyID}>
       <PlusButton>
-        <Text>Add Opportunity</Text>
+        <Text>Opportunity</Text>
       </PlusButton>
     </UpsertOpportunity>
   )

components/datetime-picker.module.scss

@@ -1,7 +1,5 @@
 .inputBox {
   color-scheme: light;
-  display: inline-block;
-  input {
-    height: 100%;
-  }
+  display: inline-flex;
+  align-items: center;
 }