@onehat/ui 0.4.113 → 0.4.114

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.113",
+	"version": "0.4.114",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Buttons/Button.js

@@ -64,6 +64,8 @@ const ButtonComponent = forwardRef((props, ref) => {
 		'flex',
 		'flex-row',
 		'items-center',
+		'disabled:opacity-40',
+		'disabled:cursor-not-allowed',
 	);
 	if (isExpandToFillVertical) {
 		// IMPORTANT! Otherwise the button will cut off the vertical content due to size classes automatically added by Gluestack (e.g. h-10)

package/src/Components/Editor/ReportPresetsEditor.js

@@ -0,0 +1,39 @@
+import Editor from './Editor.js';
+import _ from 'lodash';
+
+export default function ReportPresetsEditor(props) {
+
+	const
+		items = [
+		    {
+		        "type": "Column",
+		        "flex": 1,
+		        "defaults": {},
+		        "items": [
+		            {
+		                "type": "FieldSet",
+		                "title": "General",
+		                "reference": "general",
+		                "defaults": {},
+		                "items": [
+		                    {
+		                        "name": "report_presets__name"
+		                    },
+		                ]
+		            }
+		        ]
+		    }
+		],
+		ancillaryItems = [],
+		columnDefaults = { // defaults for each column defined in 'items', for use in Form amd Viewer
+		};
+	return <Editor
+				reference="ReportPresetsEditor"
+				title="Report Presets"
+				items={items}
+				ancillaryItems={ancillaryItems}
+				columnDefaults={columnDefaults}
+				{...props}
+			/>;
+}
+

package/src/Components/Form/Field/Combo/ReportPresetsComboEditor.js

@@ -0,0 +1,15 @@
+import { ComboEditor } from './Combo.js';
+import ReportPresetsEditorWindow from '../../../Window/ReportPresetsEditorWindow.js';
+
+function ReportPresetsComboEditor(props) {
+	return <ComboEditor
+				reference="ReportPresetsCombo"
+				model="ReportPresets"
+				uniqueRepository={true}
+				Editor={ReportPresetsEditorWindow}
+				usePermissions={true}
+				{...props}
+			/>;
+}
+
+export default ReportPresetsComboEditor;

package/src/Components/Form/Form.js

@@ -109,6 +109,7 @@ function Form(props) {
 			formSetup, // this fn will be executed after the form setup is complete
 			additionalEditButtons,
 			useAdditionalEditButtons = true,
+			additionalFooterItems, // overrides additionalFooterButtons if both are provided
 			additionalFooterButtons,
 			disableFooter = false,
 			hideResetButton = false,
@@ -207,6 +208,25 @@ function Form(props) {
 			// Fallback to empty schema that allows any fields and defaults to valid
 			return yup.object().noUnknown(false).default({});
 		})() || yup.object().shape({}), // on rare occasions, validatorToUse was null. This fixes it
+		requiredFieldsFromValidatorDescription = (() => {
+			if (editorType !== EDITOR_TYPE__PLAIN || !validatorToUse?.describe) {
+				return new Set();
+			}
+			const description = validatorToUse.describe();
+			const fields = description?.fields || {};
+			const requiredFieldNames = new Set();
+			Object.entries(fields).forEach(([fieldName, fieldConfig]) => {
+				if (!fieldConfig) {
+					return;
+				}
+				const hasRequiredTest = Array.isArray(fieldConfig.tests)
+					&& fieldConfig.tests.some((test) => test?.name === 'required');
+				if (fieldConfig.optional === false || hasRequiredTest) {
+					requiredFieldNames.add(fieldName);
+				}
+			});
+			return requiredFieldNames;
+		})(),
 		{
 			control,
 			formState,
@@ -899,6 +919,9 @@ function Form(props) {
 							if (!isMultiple) { // Don't require fields if editing multiple records
 								if (getIsRequired) {
 									isRequired = getIsRequired(formGetValues, formState);
+								} else if (requiredFieldsFromValidatorDescription.has(name)) {
+									// submitted validator (describe fallback for plain editor)
+									isRequired = true;
 								} else if (validatorToUse?.fields && validatorToUse.fields[name]?.exclusiveTests?.required) {
 									// submitted validator
 									isRequired = true;
@@ -1277,7 +1300,7 @@ function Form(props) {
 		formButtons = null,
 		scrollButtons = null,
 		footer = null,
-		footerButtons = null,
+		footerItems = null,
 		formComponents,
 		editor,
 		additionalButtons,
@@ -1419,10 +1442,10 @@ function Form(props) {
 		if (!!onSubmit) {
 			showSubmitBtn = true;
 		}
-		footerButtons =
+		footerItems =
 			<>
-			
-				{additionalFooterButtons && _.map(additionalFooterButtons, (props, ix) => {
+				{additionalFooterItems}
+				{!additionalFooterItems && additionalFooterButtons && _.map(additionalFooterButtons, (props, ix) => {
 					let isDisabled = false;
 					if (props.disableOnInvalid) {
 						isDisabled = !formState.isValid;
@@ -1534,7 +1557,7 @@ function Form(props) {
 							'rounded-b-lg',
 							'bg-primary-700',
 						)}
-					>{footerButtons}</HStack>
+					>{footerItems}</HStack>
 				</Box>;
 		} else {
 			if (!disableFooter) {
@@ -1559,7 +1582,7 @@ function Form(props) {
 					footerClassName += ' ' + footerProps.className;
 				}
 				footer = <Footer {...footerProps} className={footerClassName}>
-							{footerButtons}
+							{footerItems}
 						</Footer>;
 			}
 		}

package/src/Components/Grid/Grid.js

@@ -446,6 +446,55 @@ function GridComponent(props) {
 			}
 			return items;
 		},
+		isScrollbarPress = (e) => {
+			if (CURRENT_MODE !== UI_MODE_WEB) {
+				return false;
+			}
+
+			const
+				nativeEvent = e?.nativeEvent || e,
+				clientX = nativeEvent?.clientX,
+				clientY = nativeEvent?.clientY;
+
+			if (_.isNil(clientX) || _.isNil(clientY)) {
+				return false;
+			}
+
+			function isPointOnScrollbar(element) {
+				if (!element || typeof element.getBoundingClientRect !== 'function') {
+					return false;
+				}
+
+				const rect = element.getBoundingClientRect();
+				if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {
+					return false;
+				}
+
+				const verticalScrollbarWidth = element.offsetWidth - element.clientWidth;
+				if (verticalScrollbarWidth > 0 && clientX >= (rect.right - verticalScrollbarWidth)) {
+					return true;
+				}
+
+				const horizontalScrollbarHeight = element.offsetHeight - element.clientHeight;
+				if (horizontalScrollbarHeight > 0 && clientY >= (rect.bottom - horizontalScrollbarHeight)) {
+					return true;
+				}
+
+				return false;
+			};
+
+			const currentTarget = e?.currentTarget;
+			let target = nativeEvent?.target || e?.target;
+
+			while(target && target !== currentTarget) {
+				if (isPointOnScrollbar(target)) {
+					return true;
+				}
+				target = target.parentElement;
+			}
+
+			return isPointOnScrollbar(currentTarget);
+		},
 		renderRow = (row) => {
 			if (row.item.isDestroyed) {
 				return null;
@@ -534,6 +583,15 @@ function GridComponent(props) {
 						}
 					}}
 					onLongPress={(e) => {
+						if (isScrollbarPress(e)) {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
+							if (e.stopPropagation) {
+								e.stopPropagation();
+							}
+							return;
+						}
 						if (e.preventDefault && e.cancelable) {
 							e.preventDefault();
 						}
@@ -560,6 +618,15 @@ function GridComponent(props) {
 						// web only; happens before onLongPress triggers
 						// different behavior here than onLongPress:
 						// if user clicks on a header row or phantom record, or if onContextMenu is not set, pass to the browser's context menu
+						if (isScrollbarPress(e)) {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
+							if (e.stopPropagation) {
+								e.stopPropagation();
+							}
+							return;
+						}
 						if (isHeaderRow || isReorderMode) {
 							return
 						}

package/src/Components/Hoc/withEditor.js

@@ -663,7 +663,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				} finally {
 					setIsWaitModalShown(false);
 				}
-				if (isSuccess) {
+				if (isSuccess && duplicateEntity) {
 					setIsIgnoreNextSelectionChange(true);
 					setSelection([duplicateEntity]);
 					doEdit();

package/src/Components/Report/Report.js

@@ -22,8 +22,11 @@ import Form from '../Form/Form.js';
 import IconButton from '../Buttons/IconButton.js';
 import withComponent from '../Hoc/withComponent.js';
 import withAlert from '../Hoc/withAlert.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
 import testProps from '../../Functions/testProps.js';
 import ChartLine from '../Icons/ChartLine.js';
+import Calendar from '../Icons/Calendar.js';
+import Plus from '../Icons/Plus.js';
 import Pdf from '../Icons/Pdf.js';
 import Excel from '../Icons/Excel.js';
 import getReport from '../../Functions/getReport.js';
@@ -42,14 +45,22 @@ function Report(props) {
 			showReportHeaders = true,
 			isQuickReport = false,
 			isDisabled = false,
+			usePresets = false,
+			useQueue = false,
+			useScheduledReports = false,
 			disabledMessage = 'Report is Disabled',
 			additionalData = {},
 			quickReportData = {},
 			alert,
 		} = props,
-		buttons = [],
+		formProps = props._form || {},
+		footerProps = formProps.footerProps || {},
+		footerClassName = clsx(
+			footerProps.className,
+			'flex-wrap',
+		),
 		onPressQuickReport = () => {
-			downloadReport({
+			return downloadReport({
 				reportId,
 				reportType: REPORT_TYPES__EXCEL,
 				showReportHeaders,
@@ -59,9 +70,13 @@ function Report(props) {
 				},
 			});
 		},
-		downloadReport = (args) => {
-			getReport(args);
-			alert('Download started');
+		downloadReport = async (args) => {
+			try {
+				alert('Download started');
+				await getReport(args);
+			} catch (error) {
+				alert(error?.message || 'Unable to download report. Please try again.');
+			}
 		};
 
 	const propsIcon = props._icon || {};
@@ -161,10 +176,64 @@ function Report(props) {
 				</VStackNative>;
 	}
 
+	let footerItems = [];
+	if (usePresets) {
+		footerItems.push({
+			...testProps('reportPresetsComboEditor'),
+			key: 'reportPresetsComboEditor',
+			type: 'ReportPresetsComboEditor',
+			tooltip: 'Report Presets',
+			placeholder: 'Report Presets',
+			disableEdit: true,
+			className: 'w-[100px]',
+			baseParams: {
+				reportId,
+			},
+		});
+	}
+	if (useScheduledReports) {
+		footerItems.push({
+			...testProps('scheduleReportBtn'),
+			key: 'scheduleReportBtn',
+			type: 'Button',
+			tooltip: 'Schedule Report',
+			icon: Calendar,
+			onPress: (data) => scheduleReport({
+				reportId,
+				data: {
+					...data,
+					...additionalData,
+				},
+				reportType: REPORT_TYPES__EXCEL,
+				showReportHeaders,
+			}),
+			disableOnInvalid: true,
+		});
+	}
+	if (useQueue) {
+		footerItems.push({
+			...testProps('queueBtn'),
+			key: 'queueBtn',
+			type: 'Button',
+			tooltip: 'Add to Queue',
+			icon: Plus,
+			onPress: (data) => addToQueue({
+				reportId,
+				data: {
+					...data,
+					...additionalData,
+				},
+				reportType: REPORT_TYPES__EXCEL,
+				showReportHeaders,
+			}),
+			disableOnInvalid: true,
+		});
+	}
 	if (!disableExcel) {
-		buttons.push({
+		footerItems.push({
 			...testProps('excelBtn'),
 			key: 'excelBtn',
+			type: 'Button',
 			text: 'Download Excel',
 			icon: Excel,
 			onPress: (data) => downloadReport({
@@ -180,9 +249,10 @@ function Report(props) {
 		});
 	}
 	if (!disablePdf) {
-		buttons.push({
+		footerItems.push({
 			...testProps('pdfBtn'),
 			key: 'pdfBtn',
+			type: 'Button',
 			text: 'Download PDF',
 			icon: Pdf,
 			onPress: (data) => downloadReport({
@@ -197,6 +267,12 @@ function Report(props) {
 			disableOnInvalid: true,
 		});
 	}
+	if (footerItems.length) {
+		footerItems = footerItems.map(item => {
+			const Component = getComponentFromType(item.type);
+			return <Component {...item} />;
+		});
+	}
 	return <VStackNative
 				{...testProps('Report-' + reportId)}
 				className={clsx(
@@ -225,9 +301,13 @@ function Report(props) {
 						</VStack>
 					</HStack>
 					<Form
-						type={EDITOR_TYPE__PLAIN}
-						additionalFooterButtons={buttons}
-						{...props._form}
+						editorType={EDITOR_TYPE__PLAIN}
+						additionalFooterItems={footerItems}
+						{...formProps}
+						footerProps={{
+							...footerProps,
+							className: footerClassName,
+						}}
 					/>
 				</Box>
 				{isDisabled &&

package/src/Components/Window/ReportPresetsEditorWindow.js

@@ -0,0 +1,34 @@
+/**
+ * COPYRIGHT NOTICE
+ * This file is categorized as "Custom Source Code"
+ * and is subject to the terms and conditions defined in the
+ * "LICENSE.txt" file, which is part of this source code package.
+ */
+import UiGlobals from '../../UiGlobals.js';
+import Panel from '../Panel/Panel.js';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import ReportPresetsEditor from '../Editor/ReportPresetsEditor.js';
+
+export default function ReportPresetsEditorWindow(props) {
+	const {
+			style, // prevent it being passed to Editor
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		[width, height] = useAdjustedWindowSize(styles.DEFAULT_WINDOW_WIDTH, styles.DEFAULT_WINDOW_HEIGHT);
+	
+	return <Panel
+				{...props}
+				reference="ReportPresetsEditorWindow"
+				isCollapsible={false}
+				model="ReportPresets"
+				titleSuffix={props.editorMode === 'EDITOR_MODE__VIEW' || props.isEditorViewOnly ? ' Viewer' : ' Editor'}
+				className="ReportPresetsEditorWindow bg-white p-0"
+				isWindow={true}
+				w={width}
+				h={height}
+				flex={null}
+			>
+				<ReportPresetsEditor {...propsToPass} />
+			</Panel>;
+}

package/src/Components/index.js

@@ -283,6 +283,7 @@ import PlusMinusButton from './Buttons/PlusMinusButton.js';
 import PmCalcDebugViewer from './Viewer/PmCalcDebugViewer.js';
 import PmStatusesViewer from './Viewer/PmStatusesViewer.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
+import ReportPresetsComboEditor from './Form/Field/Combo/ReportPresetsComboEditor.js';
 // import Slider from './Form/Field/Slider.js'; // Currently, Slider is not compatible with the new React architecture. Temporarily remove it from index.js to prevent issues.
 import SquareButton from './Buttons/SquareButton.js';
 import TabPanel from './Panel/TabPanel.js';
@@ -583,6 +584,7 @@ const components = {
 	PmCalcDebugViewer,
 	PmStatusesViewer,
 	RadioGroup,
+	ReportPresetsComboEditor,
 	// Slider,
 	SquareButton,
 	TabPanel,

package/src/Functions/downloadInBackground.js

@@ -1,4 +1,5 @@
 import qs from 'qs';
+import getErrorMessageFromResponse from './getErrorMessageFromResponse.js';
 
 const downloadInBackground = async (url, data, authHeaders = {}) => {
 	try {
@@ -13,7 +14,8 @@ const downloadInBackground = async (url, data, authHeaders = {}) => {
 		});
 
 		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
+			const errorMessage = await getErrorMessageFromResponse(response);
+			throw new Error(errorMessage || `HTTP error! status: ${response.status}`);
 		}
 
 		// Get the blob from the response

package/src/Functions/downloadWithFetch.js

@@ -1,46 +1,50 @@
-const downloadWithFetch = (url, options = {}, win = null) => {
-	let obj = {};
-	fetch(url, options)
-		.then((res) => {
-			const contentDisposition = res.headers.get('Content-Disposition');
-			let filename = 'download';
-			if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
-				const matches = /filename="([^"]*)"/.exec(contentDisposition);
-				if (matches != null && matches[1]) { 
-					filename = matches[1];
-				}
-			}
-			return res.blob().then((blob) => ({ blob, filename }));
-		})
-		.then(({ blob, filename }) => {
-			// if (!win) {
-			// 	const
-			// 		winName = 'Download',
-			// 		opts = 'location=0,menubar=0,scrollbars=0';
-			// 	win = window.open('about:blank', winName, opts);
-			// }
-
-			// const file = win.URL.createObjectURL(blob);
-			// obj.window = win;
-			const file = URL.createObjectURL(blob);
-
-			// const link = win.document.createElement('a');
-			const link = document.createElement('a');
-			link.href = file;
-			link.download = filename; // Set the filename from the Content-Disposition header
-			link.target = "_blank";
-			link.click();
-
-
-			// win.URL.revokeObjectURL(file); // if you revoke it, the PDF viewer will not be able to download the PDF.
-
-			// const newWin = win.open(file);
-			// win.location.assign(file);
-			// setTimeout(() => {
-			//	win.close();
-			// }, 2000);
-
-		});
-	return obj;
+import getErrorMessageFromResponse from './getErrorMessageFromResponse.js';
+
+const downloadWithFetch = async (url, options = {}, win = null) => {
+	const res = await fetch(url, options);
+
+	if (!res.ok) {
+		const errorMessage = await getErrorMessageFromResponse(res);
+		throw new Error(errorMessage || `HTTP error! status: ${res.status}`);
+	}
+
+	const contentDisposition = res.headers.get('Content-Disposition');
+	let filename = 'download';
+	if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
+		const matches = /filename="([^"]*)"/.exec(contentDisposition);
+		if (matches != null && matches[1]) {
+			filename = matches[1];
+		}
+	}
+
+	const blob = await res.blob();
+
+	// if (!win) {
+	// 	const
+	// 		winName = 'Download',
+	// 		opts = 'location=0,menubar=0,scrollbars=0';
+	// 	win = window.open('about:blank', winName, opts);
+	// }
+
+	// const file = win.URL.createObjectURL(blob);
+	// obj.window = win;
+	const file = URL.createObjectURL(blob);
+
+	// const link = win.document.createElement('a');
+	const link = document.createElement('a');
+	link.href = file;
+	link.download = filename; // Set the filename from the Content-Disposition header
+	link.target = "_blank";
+	link.click();
+
+	// win.URL.revokeObjectURL(file); // if you revoke it, the PDF viewer will not be able to download the PDF.
+
+	// const newWin = win.open(file);
+	// win.location.assign(file);
+	// setTimeout(() => {
+	//	win.close();
+	// }, 2000);
+
+	return { window: win };
 };
 export default downloadWithFetch;

package/src/Functions/getErrorMessageFromResponse.js

@@ -0,0 +1,21 @@
+const getErrorMessageFromResponse = async (response) => {
+	const contentType = response.headers.get('Content-Type') || '';
+
+	if (contentType.includes('application/json')) {
+		const errorData = await response.json().catch(() => null);
+		if (typeof errorData === 'string' && errorData.trim()) {
+			return errorData;
+		}
+		if (errorData?.message) {
+			return errorData.message;
+		}
+		if (errorData?.error) {
+			return errorData.error;
+		}
+	}
+
+	const text = await response.text().catch(() => '');
+	return text?.trim() || null;
+};
+
+export default getErrorMessageFromResponse;

package/src/Functions/getReport.js

@@ -9,6 +9,72 @@ import {
 	getRepositoryAuthHeaders,
 } from './authFunctions.js';
 import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
+
+
+
+// keeps safe serializable values (primitives, arrays, plain objects, Date to ISO), 
+// and removes cyclic/non-plain references, preventing "RangeError: Cyclic object value" errors.
+const sanitizeReportData = (value, seen = new WeakSet()) => {
+	if (value == null) {
+		return value;
+	}
+
+	const valueType = typeof value;
+	if (
+		valueType === 'string'
+		|| valueType === 'number'
+		|| valueType === 'boolean'
+	) {
+		return value;
+	}
+	if (valueType === 'bigint') {
+		return value.toString();
+	}
+	if (valueType === 'function' || valueType === 'symbol') {
+		return undefined;
+	}
+
+	if (value instanceof Date) {
+		return value.toISOString();
+	}
+
+	if (valueType !== 'object') {
+		return undefined;
+	}
+
+	if (seen.has(value)) {
+		return undefined;
+	}
+	seen.add(value);
+
+	if (Array.isArray(value)) {
+		const output = [];
+		for (const item of value) {
+			const sanitized = sanitizeReportData(item, seen);
+			if (sanitized !== undefined) {
+				output.push(sanitized);
+			}
+		}
+		seen.delete(value);
+		return output;
+	}
+
+	if (!_.isPlainObject(value)) {
+		seen.delete(value);
+		return undefined;
+	}
+
+	const output = {};
+	for (const [key, item] of Object.entries(value)) {
+		const sanitized = sanitizeReportData(item, seen);
+		if (sanitized !== undefined) {
+			output[key] = sanitized;
+		}
+	}
+	seen.delete(value);
+	return output;
+};
 
 export default function getReport(args) {
 	const {
@@ -24,18 +90,19 @@ export default function getReport(args) {
 
 	const
 		url = UiGlobals.baseURL + 'Reports/getReport',
+		sanitizedData = sanitizeReportData(data) || {},
 		params = {
 			report_id: reportId,
 			outputFileType: reportType,
 			showReportHeaders,
-			...data,
+			...sanitizedData,
 		},
 		user = UiGlobals?.redux?.getState ? UiGlobals.redux.getState()?.auth?.user : null,
 		token = getUserToken(user),
 		authHeaders = getRepositoryAuthHeaders(token);
 
 	if (reportType === REPORT_TYPES__EXCEL) {
-		downloadInBackground(url, params, authHeaders);
+		return downloadInBackground(url, params, authHeaders);
 	} else {
 		const options = {
 			method: 'POST',
@@ -45,6 +112,6 @@ export default function getReport(args) {
 			},
 			body: JSON.stringify(params),
 		};
-		downloadWithFetch(url, options);
+		return downloadWithFetch(url, options);
 	}
 };

package/src/Functions/hasSameId.js

@@ -0,0 +1,3 @@
+export default function hasSameId(left, right) {
+	return left?.id === right?.id;
+}

package/src/Functions/testProps.js

@@ -28,6 +28,13 @@ export default function testProps(id, suffix) {
 			accessible: true,
 		};
 	}
+	if (Platform.OS === 'web') {
+		return {
+			dataSet: {
+				testid: id,
+			},
+		};
+	}
 	return {
 		testID: id,
 	};

package/src/Models/Slices/AuthSlice.js

@@ -344,7 +344,7 @@ export const verifyStartupAuthThunk = createAsyncThunk(
 		const userData = getUserData(user);
 		const token = getUserToken(userData);
 		if (!token) {
-			await dispatch(forceUnauthenticatedThunk(EXPIRED_MESSAGE));
+			await dispatch(forceUnauthenticatedThunk(null));
 			return false;
 		}
 
@@ -364,7 +364,7 @@ export const verifyStartupAuthThunk = createAsyncThunk(
 			dispatch(setAuthStatus(AUTH_STATUS_AUTHENTICATED));
 			return true;
 		} catch (error) {
-			await dispatch(forceUnauthenticatedThunk(EXPIRED_MESSAGE));
+			await dispatch(forceUnauthenticatedThunk(null));
 			return false;
 		}
 	}

package/src/PlatformImports/Web/Attachments.js

@@ -855,6 +855,7 @@ function AttachmentsElement(props) {
 								'AttachmentsElement-icon-VStack1',
 								'h-full',
 								'flex-1',
+								'min-h-0',
 								'border',
 								'p-1',
 								isLoading ? [
@@ -866,6 +867,9 @@ function AttachmentsElement(props) {
 							<HStack
 								className={clsx(
 									'AttachmentsElement-HStack',
+									'flex-1',
+									'min-h-0',
+									'overflow-y-auto',
 									'gap-2',
 									'flex-wrap',
 									'items-start',