From c5f720cdc7d58272f2a13ff90a5b4e18f204aa29 Mon Sep 17 00:00:00 2001
From: Pi <90981829+ItsPi3141@users.noreply.github.com>
Date: Sun, 2 Feb 2025 14:14:58 -0800
Subject: [PATCH] fix: prevent long decoration titles from squeezing avatar in
 msg preview

---
 app/page.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/page.jsx b/app/page.jsx
index efb0571..5ff2012 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -563,13 +563,13 @@ const App = ({ ffmpegRef, isServer }) => {
 									>
 										{m.groupStart &&
 											(avUrl === "loading" ? (
-												<div className="relative w-10 h-10 scale-75">
+												<div className="relative w-10 h-10 scale-75 shrink-0">
 													<LoadingCubes />
 												</div>
 											) : (
 												<>
 													{m.styled ? (
-														<div className="relative rounded-full w-10 h-10 overflow-hidden">
+														<div className="relative rounded-full w-10 h-10 overflow-hidden shrink-0">
 															<Image
 																src={avUrl || `${baseImgUrl}/avatars/blue.png`}
 																draggable={false}
@@ -592,13 +592,13 @@ const App = ({ ffmpegRef, isServer }) => {
 													)}
 												</>
 											))}
-										<div className="flex flex-col overflow-hidden">
+										<div className="flex flex-col overflow-hidden shrink">
 											{m.groupStart && (
-												<p className="flex items-center max-w-[250px] h-fit font-medium text-base">
-													<span className="mr-1 text-ellipsis text-nowrap overflow-hidden">
+												<p className="flex items-center gap-2 max-w-[250px] h-fit font-medium text-base">
+													<span className="text-ellipsis text-nowrap overflow-hidden">
 														{name || "Display Name"}
 													</span>
-													<span className="ml-1 h-4 text-nowrap text-text-muted text-xs">
+													<span className="h-4 text-nowrap text-text-muted text-xs">
 														Today at{" "}
 														{[
 															new Date().getHours() % 12,