Add media query for stacking

app/program/[id]/page.module.css

@@ -0,0 +1,33 @@
+.programHeader {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+.abstract {
+  white-space: pre-line;
+}
+
+.topBottomMargin {
+  margin: 2rem 0 !important;
+}
+
+.speakerList {
+  list-style: none !important;
+}
+
+.imageContainer {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media screen and (min-width: 600px) {
+  .programHeader {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    font-weight: 600;
+    font-size: x-large;
+  }
+}

app/program/[id]/page.tsx

@@ -3,6 +3,7 @@ import { formatter, prettyFormat, prettyLanguage } from '@/app/program/utils'
 import Image from 'next/image'
 import { Session } from '@/app/program/program'
 import { Metadata, ResolvingMetadata } from 'next'
+import styles from './page.module.css'
 
 function getDayAndTime({ endTime, startTime }: Session) {
   if (!startTime || !endTime) {
@@ -72,40 +73,37 @@ export default async function Page({
   return (
     <div className="content is-normal">
       <h1 className="title">{session.title}</h1>
-      <div
-        style={{
-          display: 'inline-flex',
-          fontWeight: 600,
-          gap: '2rem',
-          fontSize: 'x-large',
-        }}
-      >
-        <p>{prettyFormat(session.format)}</p>-<p>{prettyLanguage(session.language)}</p>-
+      <div className={styles.programHeader}>
+        <p>{prettyFormat(session.format)}</p>
+        <p>{prettyLanguage(session.language)}</p>
         {!!dayAndTime && !!session.room ? <p>{dayAndTime}</p> : <p>Day & time coming soon</p>}
       </div>
-      <p>
-        <b>Length:</b> {session.length} minutes
-      </p>
-      <p>
-        <b>Room:</b> {session.room ? session.room : 'Coming soon'}
-      </p>
+      <div>
+        <p>
+          <b>Length:</b> {session.length} minutes
+        </p>
+        <p>
+          <b>Room:</b> {session.room ? session.room : 'Coming soon'}
+        </p>
+      </div>
+
       <h3>Abstract</h3>
-      <p style={{ whiteSpace: 'pre-line' }}>{session.abstract}</p>
+      <p className={styles.abstract}>{session.abstract}</p>
 
       <h3>Day & time</h3>
       <p>{dayAndTime ? getDayAndTime(session) : 'Coming soon'}</p>
 
       <h3>Intended audience</h3>
       <p>{session.intendedAudience}</p>
 
-      <ul style={{ listStyle: 'none', margin: '2rem 0' }}>
+      <ul className={`${styles.speakerList} ${styles.topBottomMargin}`}>
         {session.speakers.map((speaker) => (
-          <li key={speaker.name} style={{ margin: '2rem 0' }}>
+          <li key={speaker.name} className={styles.topBottomMargin}>
             <h3>{speaker.name}</h3>
             <p>{speaker.bio}</p>
             {!!speaker.twitter && (
               <a href={`https://twitter.com/${speaker.twitter}`}>
-                <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}>
+                <div className={styles.imageContainer}>
                   <Image
                     src={'/icons/twitter-icon.svg'}
                     alt={'Twitter logo'}

app/program/utils.ts

@@ -7,6 +7,7 @@ export const formatter = new Intl.DateTimeFormat(['en'], {
   weekday: 'long',
   hour: 'numeric',
   minute: 'numeric',
+  month: "long"
 })
 export const prettyFormat = (format: Filter['format']) => {
   switch (format) {