Remove max height from image in chat and change breakpoint for mobile

vue/src/components/util/Chat.vue

@@ -20,7 +20,8 @@ let resizeObserver = null;
 
 function scrollToBottom() {
     if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+        messagesContainer.value.scrollTop =
+            messagesContainer.value.scrollHeight;
     }
 }
 
@@ -33,7 +34,8 @@ function scrollToBottomIfNear() {
 function onScroll() {
     if (!messagesContainer.value) return;
     const { scrollHeight, scrollTop, clientHeight } = messagesContainer.value;
-  isNearBottom.value = scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
+    isNearBottom.value =
+        scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
 }
 
 function goToBottom() {
@@ -102,7 +104,9 @@ onMounted(() => {
     messagesStore.connect();
 
     if (messagesContainer.value) {
-    messagesContainer.value.addEventListener("scroll", onScroll, { passive: true });
+        messagesContainer.value.addEventListener("scroll", onScroll, {
+            passive: true,
+        });
     }
 
     if (messagesInner.value) {
@@ -130,12 +134,21 @@ onUnmounted(() => {
 <template>
     <div class="chat-root flex-col flex min-h-0">
         <Header>Chat</Header>
-    <div ref="messagesContainer" class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2 min-w-0">
+        <div
+            ref="messagesContainer"
+            class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2 min-w-0"
+        >
             <div ref="messagesInner">
-        <p v-for="message in messages" :key="message.id" class="break-words min-w-0 w-full">
+                <p
+                    v-for="message in messages"
+                    :key="message.id"
+                    class="break-words min-w-0 w-full"
+                >
                     <span class="text-tertiary">{{ message.authorId }}:</span>
                     <template
-            v-for="(part, i) in parseMessageParts(message.text || '')"
+                        v-for="(part, i) in parseMessageParts(
+                            message.text || '',
+                        )"
                         :key="i"
                     >
                         <Link
@@ -148,13 +161,15 @@ onUnmounted(() => {
                         >
                         <span v-else>{{ part.value }}</span>
                     </template>
-          <template v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)">
+                    <template
+                        v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)"
+                    >
                         <img
                             v-if="isImageUrl(message.fileUrl)"
                             :src="message.fileUrl"
                             alt="Uploaded image"
                             loading="lazy"
-              class="w-full max-w-full max-h-48 rounded block"
+                            class="w-full max-w-full rounded block"
                         />
                         <video
                             v-else-if="isVideoUrl(message.fileUrl)"
@@ -163,15 +178,24 @@ onUnmounted(() => {
                             preload="none"
                             class="w-full max-w-full max-h-48 rounded block"
                         />
-            <Link v-else bare :href="message.fileUrl" target="_blank" class="underline break-all">{{
-              message.fileUrl.split("/").pop()
-            }}</Link>
+                        <Link
+                            v-else
+                            bare
+                            :href="message.fileUrl"
+                            target="_blank"
+                            class="underline break-all"
+                            >{{ message.fileUrl.split("/").pop() }}</Link
+                        >
                     </template>
                 </p>
             </div>
         </div>
         <div>
-      <input v-model="messageInput" @keyup.enter="sendMessage" aria-label="Chat message" />
+            <input
+                v-model="messageInput"
+                @keyup.enter="sendMessage"
+                aria-label="Chat message"
+            />
             <input
                 ref="fileInput"
                 type="file"
@@ -186,7 +210,9 @@ onUnmounted(() => {
                     @click="fileInput.click()"
                     >Attach</Button
                 >
-        <Button v-if="!isNearBottom" class="flex-1" @click="goToBottom">Bottom</Button>
+                <Button v-if="!isNearBottom" class="flex-1" @click="goToBottom"
+                    >Bottom</Button
+                >
             </div>
         </div>
     </div>

vue/src/views/home/Home.vue

@@ -201,7 +201,7 @@ import Steam from "./Steam.vue";
     /* } */
 }
 
-@media (max-width: 509px) {
+@media (max-width: 700px) {
     .homeGrid {
         border-image: none;
         border-width: 0;