From d5f1ecfd263795404a672d722601faf784a36ee8 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 6 Aug 2025 21:12:27 +0200
Subject: [PATCH 01/19] feat: make sure every media is embedded in messages and
 only hide text if it's composed only of links

---
 components/Message.vue | 50 ++++++++++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index c926616..fc62cf9 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -43,9 +43,9 @@
 					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
@@ -56,7 +56,7 @@
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
 		</div>
 		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
@@ -89,10 +89,10 @@ console.log("[MSG] reply message:", props.replyMessage);
 
 const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
 const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
-const mediaLinks: string[] = [];
+const mediaLinks = ref<string[]>([]);
 console.log("link matches:", linkMatches);
 
-const hasEmbed = ref(false);
+const hideText = ref(false);
 
 const sanitized = ref<string>();
 
@@ -121,23 +121,35 @@ onMounted(async () => {
 		console.log("added listeners");
 	}
 
+	const links: string[] = [];
 	for (const link of linkMatches) {
-	console.log("link:", link);
-	try {
-		const res = await $fetch.raw(link);
-		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
-			console.log("link is image");
-			mediaLinks.push(link);
+		console.log("link:", link);
+		try {
+			const res = await $fetch.raw(link);
+			if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
+				console.log("link is image");
+				links.push(link);
+			}
+		} catch (error) {
+			console.error(error);
 		}
-		if (mediaLinks.length) {
-			hasEmbed.value = true
-		};
-	} catch (error) {
-		console.error(error);
-	}
-}
 
-console.log("media links:", mediaLinks);
+		mediaLinks.value = [...links];
+	}
+
+	if (mediaLinks.value.length) {
+		const nonLinks = props.message.message.split(linkRegex);
+		let invalidContent = false;
+		for (const nonLink of nonLinks) {
+			if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
+				invalidContent = true;
+				break;
+			}
+		}
+		hideText.value = !invalidContent;
+	};
+
+	console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {

From 31b0d2e7eb7479ebeb74c10bf89c49f5880b5d20 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 6 Aug 2025 21:13:30 +0200
Subject: [PATCH 02/19] style(ui): improve styling of media-embedded messages

---
 components/MessageMedia.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index ab62387..0a8ff16 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -34,9 +34,16 @@ function createModal(link: string) {
 <style scoped>
 
 .media-container {
+	display: flex;
 	grid-column: 2;
 	grid-row: 3;
-	margin-left: .5dvw;
+	gap: .2rem;
+}
+
+.grouped-message .media-container {
+	display: flex;
+	grid-column: 2;
+	grid-row: 2;
 }
 
 .media-item {

From 02479072f6c5255cc1072acf8851ed2cafd1fc3c Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 6 Aug 2025 21:18:47 +0200
Subject: [PATCH 03/19] style(ui): improve styling of Message component

- increase profile picture size
- improve vertical and horizontal centering
- improve the way margins and gaps are styled
- adjust grid CSS
---
 components/Message.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index fc62cf9..8be0d66 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -189,9 +189,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2rem 1fr;
+	grid-template-columns: 4rem 1fr;
 	align-items: center;
-	column-gap: 1dvw;
 	width: 100%;
 	overflow-wrap: anywhere;
 }
@@ -225,10 +224,9 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-data {
 	/* border: 1px solid white; */
-	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	height: fit-content;
+	height: 100%;
 	width: 100%;
 	grid-row: 2;
 	grid-column: 2;
@@ -240,10 +238,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	min-height: 2em;
-	max-height: 2em;
-	min-width: 2em;
-	max-width: 2em;
+	min-height: 2.5em;
+	max-height: 2.5em;
+	min-width: 2.5em;
+	max-width: 2.5em;
 }
 
 .left-column {
@@ -254,8 +252,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	white-space: nowrap;
 	grid-row: 2;
 	grid-column: 1;
+	height: 100%;
+	align-items: start;
 }
 
+
 .author-username {
 	margin-right: .5dvw;
 	color: white;

From a646279b46ed0f6baf04f60c14a92ddb16744839 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Thu, 7 Aug 2025 22:14:04 +0200
Subject: [PATCH 04/19] refactor: message component

---
 components/Message.vue     | 57 +++++++++++++++++++-------------------
 components/MessageArea.vue |  1 +
 types/props.ts             | 20 +++----------
 utils/replyToMessage.ts    |  2 +-
 4 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 8be0d66..63831bf 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,24 +1,22 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
-			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+			class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
 				width="1.5em" height="1.5em"
 				viewBox="0 0 150 87.5" version="1.1" id="svg1"
 				style="overflow: visible;">
 				<defs id="defs1" />
-				<g id="layer1"
-					transform="translate(40,-35)">
-					<g id="g3"
-						transform="translate(-35,-20)">
+				<g id="layer1" transform="translate(40,-35)">
+					<g id="g3" transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="m 120.02168,87.850978 100.76157,2.4e-5"
+						d="m 120,87.5 100,2.5e-5"
 						id="path3-5" />
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="M 69.899501,174.963 120.2803,87.700931"
+						d="M 70,150 120,87.5"
 						id="path3-5-2" />
 					</g>
 				</g>
@@ -29,30 +27,30 @@
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :profile="props.author" class="message-author-avatar"/>
+			<Avatar :profile="props.message.member" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
-					{{ getDisplayName(props.author) }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
+					{{ getDisplayName(props.message.member) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 
-					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
 			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
-			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+			class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+				{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 			</span>
 		</div>
 		<div class="message-data">
@@ -71,20 +69,24 @@ import MessageReply from './UserInterface/MessageReply.vue';
 import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
+const { getUser } = useAuth()
 
 const props = defineProps<MessageProps>();
 
+const me = await getUser()
+
 const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
 
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
-const date = new Date(props.timestamp);
+const date = uuidToDate(props.message.uuid);
+
 const currentDate: Date = new Date()
 
 console.log("[MSG] message to render:", props.message);
-console.log("author:", props.author);
+console.log("author:", props.message.member);
 console.log("[MSG] reply message:", props.replyMessage);
 
 const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
@@ -97,7 +99,7 @@ const hideText = ref(false);
 const sanitized = ref<string>();
 
 onMounted(async () => {
-	const parsed = await parse(props.text, { gfm: true });
+	const parsed = await parse(props.message.message, { gfm: true });
 	sanitized.value = DOMPurify.sanitize(parsed, {
 		ALLOWED_TAGS: [
 			"strong", "em", "br", "blockquote",
@@ -160,13 +162,13 @@ const menuItems: ContextMenuItem[] = [
 	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
-console.log("me:", props.me);
-if (props.author?.user.uuid == props.me.uuid) {
+console.log("me:", me);
+if (props.message.member.user.uuid == me!.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
 	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
-if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) {
+if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
 	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
@@ -212,10 +214,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	margin-top: .3em;
 }
 
-#last-message {
-	margin-bottom: 2dvh;
-}
-
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -282,11 +280,11 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 */
 
-.mentioned {
+.highlighted {
 	background-color: var(--chat-important-background-color);
 }
 
-.mentioned:hover {
+.highlighted:hover {
 	background-color: var(--chat-important-highlighted-background-color);
 }
 
@@ -311,6 +309,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style>
 
+/* class used in utils/replyToMessage.ts */
 .replying-to {
 	background-color: var(--chat-featured-message-color);
 }
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 26645cd..b11205c 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -384,6 +384,7 @@ router.beforeEach((to, from, next) => {
 	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
+	padding-bottom: 2em;
 }
 
 .message-box-button {
diff --git a/types/props.ts b/types/props.ts
index f25ae8d..5796d83 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -1,21 +1,9 @@
-import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
+import type { MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
-	class?: string,
-	img?: string | null,
-	author: GuildMemberResponse
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	authorColor: string,
-	last: boolean,
-	messageId: string,
-	replyingTo?: boolean,
-	editing?: boolean,
-	me: UserResponse
 	message: MessageResponse,
-	replyMessage?: MessageResponse
+	replyMessage?: MessageResponse,
+	type: "normal" | "grouped",
+	editing?: boolean,
 	isMentioned?: boolean,
 }
\ No newline at end of file
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 83f4eda..1ff4df7 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -9,7 +9,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);

From a5f0576a12a31f8e3dab25423a7bf64c4d3ceeb7 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 11 Aug 2025 01:12:34 +0200
Subject: [PATCH 05/19] style(ui): add padding to all messages and remove
 margin from grouped messages

---
 components/Message.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 63831bf..80d7b9a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -195,6 +195,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	align-items: center;
 	width: 100%;
 	overflow-wrap: anywhere;
+	padding-top: .2rem;
+	padding-bottom: .2rem;
 }
 
 .message-reply-preview {
@@ -210,10 +212,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	margin-top: 1dvh;
 }
 
-.grouped-message {
-	margin-top: .3em;
-}
-
 .message-metadata {
 	display: flex;
 	gap: .5dvw;

From f38f26a6025bf40b2a797040165db465e6d35562 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 11 Aug 2025 01:13:04 +0200
Subject: [PATCH 06/19] style(ui): decrease bottom padding for messages div

---
 components/MessageArea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index b11205c..abec6a8 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -384,7 +384,7 @@ router.beforeEach((to, from, next) => {
 	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	padding-bottom: 2em;
+	padding-bottom: 1em;
 }
 
 .message-box-button {

From e7b69d706554535f68aa84f02e6c1379ba1760da Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:24:58 +0200
Subject: [PATCH 07/19] feat: simplify base modal and close it by clicking
 outside of it

---
 components/Modal/Base.vue | 86 ++++++++++++---------------------------
 1 file changed, 25 insertions(+), 61 deletions(-)

diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index a5d8ebd..42be98a 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,18 +1,11 @@
 <template>
   <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
-	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
-		<Button text="✕" variant="stealth" :callback="onCloseButton" />
-	</span>
-	<div class="modal-content">
-		<h1 class="modal-title">{{ title }}</h1>
-		<slot />
-	</div>
+    <slot />
   </dialog>
 </template>
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
@@ -20,75 +13,46 @@ const dialog = ref<HTMLDialogElement>();
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
-    if (props.onClose) {
-      dialog.value.addEventListener("close", props.onClose);
-    }
-    if (props.onCancel) {
-      dialog.value.addEventListener("cancel", props.onCancel);
-    }
+
+    // close the modal if you click outside of it
+    dialog.value.addEventListener('click', (event) => {
+      if (event.target === dialog.value) {
+        dialog.value.close();
+      }
+    });
+
+    if (props.onClose) dialog.value.addEventListener("close", props.onClose);
+    if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
   }
 });
-
-function onCloseButton () {
-  if (dialog.value) {
-    if (props.onCloseButton) {
-      props.onCloseButton()
-    }
-    
-    dialog.value.remove
-  }
-}
-
 </script>
 
-<style>
+<style scoped>
 .modal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 1em;
-  opacity: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  /* preferably set these to 70dvh and 70dvw in your components, this is a failsafe if you forget */
+  max-height: 90dvh;
+	max-width: 90dvw;
 
-  padding: var(--standard-radius); 
 	border-radius: var(--standard-radius);
-	background-color: var(--chat-highlighted-background-color);
-  color: var(--text-color);
+  border-width: 0;
+  padding: 0;
 
-  overflow: hidden;
+  /* completely transparent colour, fixes weird border radius stuff */
+  background-color: #b00b1e00; 
 }
 
 .modal-regular::backdrop {
 	background-color: var(--chat-background-color);
-	opacity: 0%;
+	opacity: 10%;
 }
 
 .modal-obscure::backdrop {
 	background-color: var(--chat-background-color);
 	opacity: 80%;
 }
-
-.modal-top-container {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-
-.modal-title {
-  font-size: 1.5rem;
-  padding: 0;
-}
-
-.modal-content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1em;
-	margin: 1em;
-	width: 100%;
-}
-
 </style>
\ No newline at end of file

From 05c351feee4a9cd20cc1cd7c519402c1e3e0f148 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:25:20 +0200
Subject: [PATCH 08/19] chore: update profile modal to fit new baes modal

---
 components/Modal/ProfilePopup.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index b99a9ea..d04587e 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -114,16 +114,16 @@ function buttonEditProfile() {
 	text-align: left;
 
 	position: relative;
-	max-height: 60dvh;
-	max-width: 60dvw;
+	max-height: 70dvh;
+	max-width: 70dvw;
 	height: 30em;
 	width: 40em;
 
 	display: flex;
 	flex-direction: column;
 
+	color: var(--text-color);
 	background-color: var(--chat-background-color);
-	border-radius: var(--standard-radius);
 
 	overflow-y: scroll;
 }
@@ -142,7 +142,6 @@ function buttonEditProfile() {
 	z-index: 0;
 
 	background-color: var(--primary-color);
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
 }
 
 #avatar {

From 783eda56b14f661df2360b493b867857f38687d5 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:36:57 +0200
Subject: [PATCH 09/19] style: add modal background colour to themes

---
 components/Modal/Base.vue                  | 3 ++-
 components/Modal/ProfilePopup.vue          | 2 +-
 public/themes/style/ash.css                | 1 +
 public/themes/style/dark.css               | 1 +
 public/themes/style/description.css        | 1 +
 public/themes/style/light.css              | 1 +
 public/themes/style/rainbow-capitalism.css | 1 +
 7 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index 42be98a..f2360bc 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -38,7 +38,8 @@ onMounted(() => {
   max-height: 90dvh;
 	max-width: 90dvw;
 
-	border-radius: var(--standard-radius);
+	background-color: var(--modal-background-color);
+  border-radius: var(--standard-radius);
   border-width: 0;
   padding: 0;
 
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index d04587e..8eeee6c 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -123,7 +123,7 @@ function buttonEditProfile() {
 	flex-direction: column;
 
 	color: var(--text-color);
-	background-color: var(--chat-background-color);
+	background-color: var(--modal-background-color);
 
 	overflow-y: scroll;
 }
diff --git a/public/themes/style/ash.css b/public/themes/style/ash.css
index 495fa15..d4ed893 100644
--- a/public/themes/style/ash.css
+++ b/public/themes/style/ash.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f3f2f60;
 	--popup-background-color: #2f2828;
 	--popup-highlighted-background-color: #382f2f;
+	--modal-background-color: #3a352f;
 
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
diff --git a/public/themes/style/dark.css b/public/themes/style/dark.css
index d23ed76..4fddaf8 100644
--- a/public/themes/style/dark.css
+++ b/public/themes/style/dark.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
+	--modal-background-color: #28241f;
 
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
diff --git a/public/themes/style/description.css b/public/themes/style/description.css
index 972821c..45829e0 100644
--- a/public/themes/style/description.css
+++ b/public/themes/style/description.css
@@ -18,6 +18,7 @@ complementaryColor = black
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
+	--modal-background-color: #181f1f;
 
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
diff --git a/public/themes/style/light.css b/public/themes/style/light.css
index 78bf2f9..6cfecf6 100644
--- a/public/themes/style/light.css
+++ b/public/themes/style/light.css
@@ -17,6 +17,7 @@ complementaryColor = black
     --chat-featured-message-color: #e8ac841f;
     --popup-background-color: #e8e4e0;
     --popup-highlighted-background-color: #dfdbd6;
+	--modal-background-color: #e8e4e0;
 
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
diff --git a/public/themes/style/rainbow-capitalism.css b/public/themes/style/rainbow-capitalism.css
index 8ca3ed7..df01d39 100644
--- a/public/themes/style/rainbow-capitalism.css
+++ b/public/themes/style/rainbow-capitalism.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f8f4f80;
 	--popup-background-color: #80808080;
 	--popup-highlighted-background-color: #9f9f9f9f;
+	--modal-background-color: #7fa87fff;
 
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;

From 002b6982a64d691ecccc7c874159ae9eab690e1a Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:46:49 +0200
Subject: [PATCH 10/19] feat: add embed radius

---
 components/MessageMedia.vue   | 1 +
 public/themes/layout/gorb.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index ab62387..48a076b 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -42,6 +42,7 @@ function createModal(link: string) {
 .media-item {
 	cursor: pointer;
 	max-width: 15dvw;
+	border-radius: var(--embed-radius);
 }
 
 </style>
\ No newline at end of file
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 7b8e88b..86ea465 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -10,6 +10,7 @@ complementaryColor = white
 	--sidebar-margin: .5em;
 	
 	--standard-radius: .5em;
+	--embed-radius: .3em;
 	--button-radius: .6em;
 	--guild-icon-radius: 15%;
 	--pfp-radius: 50%;

From 26ef3671e9b4e4517ae8757f848ebc1d6ca7a72a Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:57:17 +0200
Subject: [PATCH 11/19] style: increase message padding to make highlight more
 pleasant

---
 components/Message.vue     | 10 +++++++---
 components/MessageArea.vue |  8 ++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 80d7b9a..0e37895 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -188,15 +188,19 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style scoped>
 .message {
-	text-align: left;
-	/* border: 1px solid lightcoral; */
 	display: grid;
 	grid-template-columns: 4rem 1fr;
 	align-items: center;
-	width: 100%;
+
+	text-align: left;
+	/* -4 dvw due to 2dvw of padding on both sides */
+	width: calc(100% - 4dvw);
 	overflow-wrap: anywhere;
+
 	padding-top: .2rem;
 	padding-bottom: .2rem;
+	padding-left: 2dvw;
+	padding-right: 2dvw;
 }
 
 .message-reply-preview {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index abec6a8..900e053 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -320,8 +320,6 @@ router.beforeEach((to, from, next) => {
 #message-area {
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	overflow: hidden;
 	flex-grow: 1;
 }
@@ -329,8 +327,8 @@ router.beforeEach((to, from, next) => {
 #message-box {
 	margin-top: auto; /* force it to the bottom of the screen */
 	margin-bottom: 2dvh;
-	margin-left: 1dvw;
-	margin-right: 1dvw;
+	margin-left: 2dvw;
+	margin-right: 2dvw;
 
 	padding-left: 2%;
 	padding-right: 2%;
@@ -382,8 +380,6 @@ router.beforeEach((to, from, next) => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	padding-bottom: 1em;
 }
 

From d1161cc0964501ac4d1c043eb32344195f8eac3e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 11 Aug 2025 03:08:38 +0200
Subject: [PATCH 12/19] style(ui): add padding-top for grouped message date to
 be center-aligned vertically with the first line of the text message

---
 components/Message.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 80d7b9a..58c703f 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -266,9 +266,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .side-message-date {
 	font-size: .625em;
-	display: flex;
-	align-items: center;
-	align-content: center;
+	margin-top: .4em;
 }
 
 /*

From 55ce7fea455758c04dfcfa83e5a4f78abc10101c Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 03:14:39 +0200
Subject: [PATCH 13/19] style: make highlight radius themable

---
 components/Message.vue        | 3 ++-
 public/themes/layout/gorb.css | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Message.vue b/components/Message.vue
index 0e37895..a121572 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -200,7 +200,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	padding-top: .2rem;
 	padding-bottom: .2rem;
 	padding-left: 2dvw;
-	padding-right: 2dvw;
+	padding-right: 1dvw;
+	border-radius: 0 var(--minor-radius) var(--minor-radius) 0;
 }
 
 .message-reply-preview {
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 7b8e88b..1cee0b4 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -9,6 +9,7 @@ complementaryColor = white
 	--sidebar-icon-gap: .25em;
 	--sidebar-margin: .5em;
 	
+	--minor-radius: .35em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--guild-icon-radius: 15%;

From 82502d99ef9fa3ac811176427c75349123ddf589 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 03:32:58 +0200
Subject: [PATCH 14/19] style: update theme colours

---
 public/themes/style/ash.css   | 4 ++--
 public/themes/style/dark.css  | 8 ++++----
 public/themes/style/light.css | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/themes/style/ash.css b/public/themes/style/ash.css
index 495fa15..be7c6de 100644
--- a/public/themes/style/ash.css
+++ b/public/themes/style/ash.css
@@ -10,7 +10,7 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #2f2e2d;
+	--chat-background-color: #3e3a37;
     --chat-highlighted-background-color: #3f3b38;
 	--chat-important-background-color: #ffcf5f38;
 	--chat-important-highlighted-background-color: #ffa86f4f;
@@ -18,7 +18,7 @@ complementaryColor = white
 	--popup-background-color: #2f2828;
 	--popup-highlighted-background-color: #382f2f;
 
-	--sidebar-background-color: #3e3a37;
+	--sidebar-background-color: #2f2e2d;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
 	--chatbox-background-color: #3a3733;
diff --git a/public/themes/style/dark.css b/public/themes/style/dark.css
index d23ed76..420e8c9 100644
--- a/public/themes/style/dark.css
+++ b/public/themes/style/dark.css
@@ -10,16 +10,16 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #1f1e1d;
-    --chat-highlighted-background-color: #2f2b28;
+	--chat-background-color: #282624;
+    --chat-highlighted-background-color: #383430;
 	--chat-important-background-color: #ffc44f2f;
 	--chat-important-highlighted-background-color: #ffa45f4a;
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
 
-	--sidebar-background-color: #2e2a27;
-	--sidebar-highlighted-background-color: #36322b;
+	--sidebar-background-color: #1f1e1d;
+	--sidebar-highlighted-background-color: #2f2b28;
 	--topbar-background-color: #2a2723;
 	--chatbox-background-color: #1a1713;
 
diff --git a/public/themes/style/light.css b/public/themes/style/light.css
index 78bf2f9..cd1f55b 100644
--- a/public/themes/style/light.css
+++ b/public/themes/style/light.css
@@ -10,13 +10,13 @@ complementaryColor = black
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-    --chat-background-color: #f0ebe8;
-    --chat-highlighted-background-color: #e8e4e0;
+    --chat-background-color: #f0edeb;
+    --chat-highlighted-background-color: #aba8a4;
     --chat-important-background-color: #df5f0b26;
     --chat-important-hightlighted-background-color: #df5f0b3d;
     --chat-featured-message-color: #e8ac841f;
-    --popup-background-color: #e8e4e0;
-    --popup-highlighted-background-color: #dfdbd6;
+    --popup-background-color: #b8b4b0;
+    --popup-highlighted-background-color: #a6a4a2;
 
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;

From c95f13ff180da3518a718ad11ea2a300ebcaafd6 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 03:40:38 +0200
Subject: [PATCH 15/19] style: update ash theme

---
 public/themes/style/ash.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/themes/style/ash.css b/public/themes/style/ash.css
index be7c6de..e33fbf6 100644
--- a/public/themes/style/ash.css
+++ b/public/themes/style/ash.css
@@ -10,15 +10,15 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #3e3a37;
-    --chat-highlighted-background-color: #3f3b38;
+	--chat-background-color: #383432;
+    --chat-highlighted-background-color: #4c4a48;
 	--chat-important-background-color: #ffcf5f38;
 	--chat-important-highlighted-background-color: #ffa86f4f;
 	--chat-featured-message-color: #4f3f2f60;
 	--popup-background-color: #2f2828;
 	--popup-highlighted-background-color: #382f2f;
 
-	--sidebar-background-color: #2f2e2d;
+	--sidebar-background-color: #322f2d;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
 	--chatbox-background-color: #3a3733;

From 5a15bd5ddbce56f3021d65ef37d8989571c57a5d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 11 Aug 2025 04:39:43 +0200
Subject: [PATCH 16/19] fix(ui): media cutting off and causing horizontal
 scroll bar when overflowing, turn flex-direction to column instead

---
 components/Message.vue      |  2 +-
 components/MessageMedia.vue | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 770b924..e68bf94 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -55,8 +55,8 @@
 		</div>
 		<div class="message-data">
 			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index 0a8ff16..bf25be6 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
+	<div ref="mediaContainer" class="media-container">
+		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" @load="imagesLoaded++" />
 	</div>
 </template>
 
@@ -11,6 +11,23 @@ import { render } from 'vue';
 
 const props = defineProps<{ links: string[] }>();
 
+const mediaContainer = ref<HTMLDivElement>();
+
+const imagesLoaded = ref(0);
+
+watch(imagesLoaded, () => {
+	if (imagesLoaded.value < props.links.length) return;
+	const messageDataContainer = mediaContainer.value?.closest(".message-data");
+	const messagesContainer = document.getElementById("messages");
+	if (messageDataContainer && messagesContainer && mediaContainer.value) {
+		const mediaRect = messageDataContainer.getBoundingClientRect();
+		const messagesRect = messagesContainer.getBoundingClientRect();
+		if (mediaRect.right > messagesRect.right) {
+			mediaContainer.value.style.flexDirection = "column";
+		}
+	}
+});
+
 function createModal(link: string) {
 	const div = document.createElement("div");
 	const modal = h(ModalBase, {

From 2d8516885dc16818b0c72f315df1207a8ef2fb66 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 22:29:23 +0200
Subject: [PATCH 17/19] chore: remove unused function?

---
 classes/Message.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/classes/Message.ts b/classes/Message.ts
index de0d12b..a782d6a 100644
--- a/classes/Message.ts
+++ b/classes/Message.ts
@@ -12,8 +12,4 @@ export default class Message {
 		this.userUuid = user_uuid;
 		this.message = message;
 	}
-
-	getTimestamp() {
-		return uuidToTimestamp(this.uuid);
-	}
 }
\ No newline at end of file

From 8a77cb9a1d32b657f972aa3f436bec672cd28b12 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 22:31:33 +0200
Subject: [PATCH 18/19] chore: clean up Message component instancing in
 MessageArea

---
 components/MessageArea.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 900e053..e2788ae 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,14 +1,12 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid"
-				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
-				:format="timeFormat" :type="messagesType[message.uuid]"
-				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
+			<Message v-for="(message, i) of messages" :key="message.uuid"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.member.user.uuid)}`"
-				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined"
+				:type="messagesType[message.uuid]"
+				:editing="false"
+				:is-mentioned="false" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">

From 53ec803f2c399aaa499018c00f1e9a5d53f0c080 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 23:01:28 +0200
Subject: [PATCH 19/19] fix(ui): use css instead of javascript to prevent
 cutting off media

---
 components/Message.vue      |  2 +-
 components/MessageMedia.vue | 36 +++++++-----------------------------
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index e68bf94..c6207a1 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -55,7 +55,7 @@
 		</div>
 		<div class="message-data">
 			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
-			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
 		</div>
 	</div>
 </template>
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index bf25be6..11d436a 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -1,6 +1,9 @@
 <template>
-	<div ref="mediaContainer" class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" @load="imagesLoaded++" />
+	<div class="media-container">
+		<NuxtImg v-for="link of props.links"
+			class="media-item"
+			:src="link"
+			@click.prevent="createModal(link)" />
 	</div>
 </template>
 
@@ -8,26 +11,8 @@
 import { ModalBase } from '#components';
 import { render } from 'vue';
 
-
 const props = defineProps<{ links: string[] }>();
 
-const mediaContainer = ref<HTMLDivElement>();
-
-const imagesLoaded = ref(0);
-
-watch(imagesLoaded, () => {
-	if (imagesLoaded.value < props.links.length) return;
-	const messageDataContainer = mediaContainer.value?.closest(".message-data");
-	const messagesContainer = document.getElementById("messages");
-	if (messageDataContainer && messagesContainer && mediaContainer.value) {
-		const mediaRect = messageDataContainer.getBoundingClientRect();
-		const messagesRect = messagesContainer.getBoundingClientRect();
-		if (mediaRect.right > messagesRect.right) {
-			mediaContainer.value.style.flexDirection = "column";
-		}
-	}
-});
-
 function createModal(link: string) {
 	const div = document.createElement("div");
 	const modal = h(ModalBase, {
@@ -52,20 +37,13 @@ function createModal(link: string) {
 
 .media-container {
 	display: flex;
-	grid-column: 2;
-	grid-row: 3;
+	flex-wrap: wrap;
 	gap: .2rem;
-}
-
-.grouped-message .media-container {
-	display: flex;
-	grid-column: 2;
-	grid-row: 2;
+	max-width: 100%;
 }
 
 .media-item {
 	cursor: pointer;
 	max-width: 15dvw;
 }
-
 </style>
\ No newline at end of file