use max-width instead of width for dm images

README.md

@@ -13,7 +13,7 @@
 
 # ✨ About Calckey
 
-- Calckey is based off of Misskey, a powerful microblogging server on ActivityPub with features such as emoji reactions, a customizable web ui, rich chatting, and much more!
+- Calckey is based off of Misskey, a powerful microblogging server on ActivityPub with features such as emoji reactions, a customizable web UI, rich chatting, and much more!
 - Calckey adds many quality of life changes and bug fixes for users and instance admins alike.
 - Read **[this document](./CALCKEY.md)** all for current and future differences.
 - Notable differences:

packages/client/src/components/MkMediaList.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="hoawjimk">
 	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
-	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ width400: inDm }">
+	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
 		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length">
 			<template v-for="media in mediaList.filter(media => previewable(media))">
 				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
@@ -105,8 +105,8 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 <style lang="scss" scoped>
 .hoawjimk {
 
-	> .width400 {
-		width: 400px !important;
+	> .dmWidth {
+		max-width: 400px;
 	}
 
 	> .gird-container {

packages/client/src/pages/messaging/messaging-room.message.vue

@@ -267,7 +267,7 @@ function del(): void {
 				::selection {
 					color: var(--accent);
 					background-color: #fff;
-				} 
+				}
 
 				&.noText {
 					background: transparent;