From 0008d9e914f5650fe0e9f68f060644b2ff849ec6 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Date: Fri, 27 Aug 2021 20:38:11 -0400
Subject: [PATCH] Misc css fixes

---
 components/Code.module.css      |  2 +-
 components/EventCard.module.css |  7 +++----
 components/EventCard.tsx        | 33 ++++++++++++++++++++++-----------
 components/Image.module.css     |  4 ++++
 components/Image.tsx            | 10 ++++++++--
 components/Link.module.css      |  1 +
 pages/_app.tsx                  |  2 ++
 7 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 components/Image.module.css

diff --git a/components/Code.module.css b/components/Code.module.css
index ba3d5b71..d317052c 100644
--- a/components/Code.module.css
+++ b/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;
 }
diff --git a/components/EventCard.module.css b/components/EventCard.module.css
index 27393553..714c609a 100644
--- a/components/EventCard.module.css
+++ b/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 {
diff --git a/components/EventCard.tsx b/components/EventCard.tsx
index eeae0997..193b8ff3 100644
--- a/components/EventCard.tsx
+++ b/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>
   );
diff --git a/components/Image.module.css b/components/Image.module.css
new file mode 100644
index 00000000..0e712845
--- /dev/null
+++ b/components/Image.module.css
@@ -0,0 +1,4 @@
+.image {
+  /* So that image doesn't overflow on mobile screens */
+  max-width: 100%;
+}
diff --git a/components/Image.tsx b/components/Image.tsx
index 8175af56..2ab05c22 100644
--- a/components/Image.tsx
+++ b/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(" ")} />;
 }
diff --git a/components/Link.module.css b/components/Link.module.css
index 8edbfa31..3ed8f8ac 100644
--- a/components/Link.module.css
+++ b/components/Link.module.css
@@ -3,6 +3,7 @@
   transition-duration: 0.3s;
   text-decoration: none;
   white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 .link:hover {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e705b5ec..71f1a530 100644
--- a/pages/_app.tsx
+++ b/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}>