fix send-message input

src/client/webapp/elements-styles/components/file-drop-target.scss

@@ -25,7 +25,7 @@
 			display: block;
 			height: 128px;
 			max-width: 128px;
-			margin-right: 16px;
+			margin-right: 32px;
 		}
 
 		.drop-description {

src/client/webapp/elements-styles/sections/send-message.scss

@@ -94,6 +94,7 @@ $borderRadius: 8px;
 				flex: 1;
 				padding: 12px 12px 12px 0;
 				max-height: 300px;
+				overflow-x: hidden;
 				overflow-y: scroll;
 				overflow-wrap: anywhere;
 				white-space: pre;

src/client/webapp/elements/overlays/overlay-image.tsx

@@ -3,7 +3,7 @@ const electronConsole = electronRemote.getGlobal('console') as Console;
 import Logger from '../../../../logger/logger';
 const LOG = Logger.create(__filename, electronConsole);
 
-import React, { FC, useMemo, useRef } from 'react';
+import React, { FC, useCallback, useMemo, useRef } from 'react';
 import CombinedGuild from '../../guild-combined';
 import ElementsUtil, { IAlignment } from '../require/elements-util';
 import DownloadButton from '../components/button-download';
@@ -33,11 +33,27 @@ const ImageOverlay: FC<ImageOverlayProps> = (props: ImageOverlayProps) => {
 	const [contextMenu, onContextMenu] = useContextClickContextMenu(
 		(_alignment: IAlignment, relativeToPos: { x: number; y: number }, close: () => void) => {
 			if (!isLoaded(resource)) return null;
-			return <ImageContextMenu relativeToPos={relativeToPos} close={close} resourceName={resourceName} resourceBuff={resource.value.data} isPreview={false} />;
+			return (
+				<ImageContextMenu
+					relativeToPos={relativeToPos}
+					close={close}
+					resourceName={resourceName}
+					resourceBuff={resource.value.data}
+					isPreview={false}
+				/>
+			);
 		},
 		[resource, resourceName],
 	);
 
+	const onBaseClick = useCallback(
+		(e: MouseEvent) => {
+			if (!rootRef.current) return 1;
+			return 2;
+		},
+		[rootRef],
+	);
+
 	const sizeText = useMemo(() => {
 		if (isFailed(resource)) return 'Failed to load';
 		if (!isLoaded(resource)) return 'Loading size...';
@@ -53,8 +69,12 @@ const ImageOverlay: FC<ImageOverlayProps> = (props: ImageOverlayProps) => {
 						<div className="name">{resourceName}</div>
 						<div className="size">{sizeText}</div>
 					</div>
-					{/* TODO: I think this may break if the download button gets clicked before the resource is loaded... */}
-					<DownloadButton downloadBuff={isLoaded(resource) ? resource.value.data : undefined} downloadBuffErr={isFailed(resource)} resourceName={resourceName} />
+					{/* TODO: I think this may break if the download button gets clicked before the resource is loaded (and the downloadBuff is undefined)... */}
+					<DownloadButton
+						downloadBuff={isLoaded(resource) ? resource.value.data : undefined}
+						downloadBuffErr={isFailed(resource)}
+						resourceName={resourceName}
+					/>
 				</div>
 				{contextMenu}
 			</div>