From c2ab65e5c041a6c138f23b2f598ef18091b35c6b Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 25 Jan 2025 16:03:04 +0200
Subject: [PATCH] web/composer: don't allow media to be too wide

---
 web/src/ui/composer/ComposerMedia.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/ui/composer/ComposerMedia.tsx b/web/src/ui/composer/ComposerMedia.tsx
index 44fe952..40a0b94 100644
--- a/web/src/ui/composer/ComposerMedia.tsx
+++ b/web/src/ui/composer/ComposerMedia.tsx
@@ -13,6 +13,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import { RefCallback, useState } from "react"
 import Client from "@/api/client.ts"
 import { RoomStateStore, usePreference } from "@/api/statestore"
 import type { MediaMessageEventContent } from "@/api/types"
@@ -27,10 +28,19 @@ export interface ComposerMediaProps {
 }
 
 export const ComposerMedia = ({ content, clearMedia }: ComposerMediaProps) => {
+	const defaultMaxWidth = 360
+	const paddingAndButtonWidth = 16 + 40
+	const [maxWidth, setMaxWidth] = useState(defaultMaxWidth)
 	const [mediaContent, containerClass, containerStyle] = useMediaContent(
-		content, "m.room.message", { height: 120, width: 360 },
+		content, "m.room.message", { height: 120, width: maxWidth },
 	)
-	return <div className="composer-media">
+	const containerRef: RefCallback<HTMLDivElement> = elem => {
+		setMaxWidth(Math.min(
+			(elem?.getBoundingClientRect().width ?? defaultMaxWidth) - paddingAndButtonWidth,
+			defaultMaxWidth,
+		))
+	}
+	return <div className="composer-media" ref={containerRef}>
 		<div className={`media-container ${containerClass}`} style={containerStyle}>
 			{mediaContent}
 		</div>