Misc css fixes

components/Code.module.css

@@ -2,5 +2,5 @@
   padding: 0 calc(4rem / 16);
   background: var(--code-background);
   border-radius: calc(5rem / 16);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }

components/EventCard.module.css

@@ -15,13 +15,12 @@
   margin-bottom: 1rem;
 }
 
-.spacer {
-  margin-top: calc(76rem / 16);
+.registerButton {
+  font-weight: bold;
 }
 
-.registerButton {
+.registerButtonWithPoster {
   display: block;
-  font-weight: bold;
 }
 
 .content > h1 {

components/EventCard.tsx

@@ -28,10 +28,28 @@ export function EventCard({
 }: EventCardProps) {
   return (
     <article className={styles.card}>
-      <aside>
-        {poster && <Image alt={name} src={poster} />}
-        {!poster && <div className={styles.spacer}></div>}
-        {registerLink && (
+      {poster && (
+        <aside>
+          <Image alt={name} src={poster} />
+          {registerLink && (
+            <Button
+              isLink={true}
+              href={registerLink}
+              size="small"
+              className={`${styles.registerButton} ${styles.registerButtonWithPoster}`}
+            >
+              Register
+            </Button>
+          )}
+        </aside>
+      )}
+      <section className={styles.content}>
+        <h1>{name}</h1>
+        <h2>
+          <EventSetting date={date} online={online} location={location} />
+        </h2>
+        <div>{children}</div>
+        {!poster && registerLink && (
           <Button
             isLink={true}
             href={registerLink}
@@ -41,13 +59,6 @@ export function EventCard({
             Register
           </Button>
         )}
-      </aside>
-      <section className={styles.content}>
-        <h1>{name}</h1>
-        <h2>
-          <EventSetting date={date} online={online} location={location} />
-        </h2>
-        <div>{children}</div>
       </section>
     </article>
   );

components/Image.module.css

@@ -0,0 +1,4 @@
+.image {
+  /* So that image doesn't overflow on mobile screens */
+  max-width: 100%;
+}

components/Image.tsx

@@ -1,8 +1,14 @@
 import React, { ImgHTMLAttributes } from "react";
 
+import styles from "./Image.module.css";
+
 export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
+  const classes = props.className
+    ? [props.className, styles.image]
+    : [styles.image];
+
   if (props.src?.startsWith("http://") || props.src?.startsWith("https://")) {
-    return <img {...props} />;
+    return <img {...props} className={classes.join(" ")} />;
   }
 
   const { src: relativeSrc = "" } = props;
@@ -16,5 +22,5 @@ export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
     absoluteSrc += "/" + relativeSrc;
   }
 
-  return <img {...props} src={absoluteSrc} />;
+  return <img {...props} src={absoluteSrc} className={classes.join(" ")} />;
 }

components/Link.module.css

@@ -3,6 +3,7 @@
   transition-duration: 0.3s;
   text-decoration: none;
   white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 .link:hover {

pages/_app.tsx

@@ -8,6 +8,7 @@ import { Code } from "@/components/Code";
 import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
 import { HorizontalLine } from "@/components/HorizontalLine";
+import { Image } from "@/components/Image";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
 import { Pre } from "@/components/Pre";
@@ -35,6 +36,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           button: Button,
           pre: Pre,
           inlineCode: Code,
+          img: Image,
         }}
       >
         <div className={styles.appContainer}>