Add a max width for the side menu in security

specifyweb/frontend/js_src/lib/components/FormSliders/RecordSelectorFromIds.tsx

@@ -122,7 +122,7 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
     model,
     records:
       typeof newResource === 'object' ? [...records, newResource] : records,
-    totalCount: totalCount,
+    totalCount,
     onAdd:
       typeof handleAdd === 'function'
         ? (resources): void => {

specifyweb/frontend/js_src/lib/components/Header/NotificationRenderers.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import type { LocalizedString } from 'typesafe-i18n';
 
+import { mergingText } from '../../localization/merging';
 import { notificationsText } from '../../localization/notifications';
 import { StringToJsx } from '../../localization/utils';
 import type { IR } from '../../utils/types';
 import { Link } from '../Atoms/Link';
-import { mergingText } from '../../localization/merging';
-import { TableIcon } from '../Molecules/TableIcon';
-import { mergingQueryParameter } from '../Merging';
+import { getModel } from '../DataModel/schema';
 import { userInformation } from '../InitialContext/userInformation';
-import { formatUrl } from '../Router/queryString';
+import { mergingQueryParameter } from '../Merging';
 import { FormattedResource } from '../Molecules/FormattedResource';
-import { getModel } from '../DataModel/schema';
+import { TableIcon } from '../Molecules/TableIcon';
+import { formatUrl } from '../Router/queryString';
 
 export type GenericNotification = {
   readonly messageId: string;
@@ -128,7 +128,7 @@ export const notificationRenderers: IR<
   },
   'record-merge-starting'(notification) {
     const tableName = notification.payload.table;
-    const collectionId = parseInt(notification.payload.collection_id);
+    const collectionId = Number.parseInt(notification.payload.collection_id);
     const mergeName = notification.payload.name;
     const collection = userInformation.availableCollections.find(
       ({ id }) => id === collectionId
@@ -146,7 +146,7 @@ export const notificationRenderers: IR<
   },
   'record-merge-failed'(notification) {
     const tableName = notification.payload.table;
-    const id = parseInt(notification.payload.new_record_id);
+    const id = Number.parseInt(notification.payload.new_record_id);
     const ids = [JSON.parse(notification.payload.old_record_ids), id];
     const url = formatUrl(`/specify/overlay/merge/${tableName}/`, {
       [mergingQueryParameter]: Array.from(ids).join(','),
@@ -163,7 +163,7 @@ export const notificationRenderers: IR<
   },
   'record-merge-aborted'(notification) {
     const tableName = notification.payload.table;
-    const collectionId = parseInt(notification.payload.collection_id);
+    const collectionId = Number.parseInt(notification.payload.collection_id);
     const mergeName = notification.payload.name;
     const collection = userInformation.availableCollections.find(
       ({ id }) => id === collectionId
@@ -194,7 +194,7 @@ export const notificationRenderers: IR<
           {mergingText.mergingHasSucceeded()}
           <div className="flex items-center gap-2">
             <TableIcon label name={tableName} />
-            <FormattedResource asLink={true} resource={resource} />
+            <FormattedResource asLink resource={resource} />
           </div>
         </>
       )

specifyweb/frontend/js_src/lib/components/Merging/Status.tsx

@@ -1,27 +1,30 @@
 import React from 'react';
-import { MergeStatus, StatusState, initialStatusState } from './types';
+import type { LocalizedString } from 'typesafe-i18n';
+
+import { commonText } from '../../localization/common';
+import { mergingText } from '../../localization/merging';
 import { ajax } from '../../utils/ajax';
-import { MILLISECONDS } from '../Atoms/timeUnits';
-import { softFail } from '../Errors/Crash';
-import { LoadingContext } from '../Core/Contexts';
-import { Dialog, dialogClassNames } from '../Molecules/Dialog';
-import { Button } from '../Atoms/Button';
 import { ping } from '../../utils/ajax/ping';
-import { mergingText } from '../../localization/merging';
-import { Label } from '../Atoms/Form';
 import { Progress } from '../Atoms';
-import { commonText } from '../../localization/common';
-import { LocalizedString } from 'typesafe-i18n';
+import { Button } from '../Atoms/Button';
+import { Label } from '../Atoms/Form';
 import { dialogIcons } from '../Atoms/Icons';
-import { downloadFile } from '../Molecules/FilePicker';
+import { MILLISECONDS } from '../Atoms/timeUnits';
+import { LoadingContext } from '../Core/Contexts';
+import { softFail } from '../Errors/Crash';
 import { produceStackTrace } from '../Errors/stackTrace';
+import { Dialog, dialogClassNames } from '../Molecules/Dialog';
+import { downloadFile } from '../Molecules/FilePicker';
+import type { MergeStatus, StatusState } from './types';
+import { initialStatusState } from './types';
 
-const statusLocalization: { [STATE in MergeStatus]: LocalizedString } = {
-  MERGING: mergingText.merging(),
-  ABORTED: mergingText.mergeFailed(),
-  FAILED: mergingText.mergeFailed(),
-  SUCCEEDED: mergingText.mergeSucceeded(),
-};
+const statusLocalization: { readonly [STATE in MergeStatus]: LocalizedString } =
+  {
+    MERGING: mergingText.merging(),
+    ABORTED: mergingText.mergeFailed(),
+    FAILED: mergingText.mergeFailed(),
+    SUCCEEDED: mergingText.mergeSucceeded(),
+  };
 
 export function Status({
   mergingId,
@@ -122,10 +125,10 @@ export function Status({
       className={{ container: dialogClassNames.narrowContainer }}
       dimensionsKey="merging-progress"
       header={statusLocalization[state.status]}
-      onClose={undefined}
       icon={
         state.status === 'SUCCEEDED' ? dialogIcons.success : dialogIcons.error
       }
+      onClose={undefined}
     >
       <Label.Block aria-atomic aria-live="polite" className="gap-2">
         <div className="flex flex-col gap-2">

specifyweb/frontend/js_src/lib/components/Merging/index.tsx

@@ -17,6 +17,7 @@ import { filterArray } from '../../utils/types';
 import { multiSortFunction, removeKey } from '../../utils/utils';
 import { Button } from '../Atoms/Button';
 import { Input, Label } from '../Atoms/Form';
+import { icons } from '../Atoms/Icons';
 import { Link } from '../Atoms/Link';
 import { Submit } from '../Atoms/Submit';
 import { LoadingContext } from '../Core/Contexts';
@@ -37,10 +38,9 @@ import { formatUrl } from '../Router/queryString';
 import { OverlayContext, OverlayLocation } from '../Router/Router';
 import { autoMerge, postMergeResource } from './autoMerge';
 import { CompareRecords } from './Compare';
-import { Status } from './Status';
-import { InvalidMergeRecordsDialog } from './InvalidMergeRecords';
 import { recordMergingTableSpec } from './definitions';
-import { icons } from '../Atoms/Icons';
+import { InvalidMergeRecordsDialog } from './InvalidMergeRecords';
+import { Status } from './Status';
 
 export const mergingQueryParameter = 'records';
 
@@ -121,7 +121,7 @@ export function MergingDialog(): JSX.Element | null {
     setIds(ids.filter((id) => !dismissedIds.includes(id)).join(','));
 
   return model === undefined ? null : (
-    <RestrictMerge model={model} ids={ids} onDismiss={handleDismiss} />
+    <RestrictMerge ids={ids} model={model} onDismiss={handleDismiss} />
   );
 }
 
@@ -166,7 +166,7 @@ function RestrictMerge({
       }
     />
   ) : (
-    <Merging records={records} model={model} onDismiss={handleDismiss} />
+    <Merging model={model} records={records} onDismiss={handleDismiss} />
   );
 }
 
@@ -427,11 +427,11 @@ export function MergeDialogContainer({
   return (
     <Dialog
       buttons={buttons}
+      icon={icons.cog}
+      onClose={handleClose}
       header={header}
       // Disable gradient because table headers have solid backgrounds
       specialMode="noGradient"
-      onClose={handleClose}
-      icon={icons.cog}
     >
       {children}
     </Dialog>

specifyweb/frontend/js_src/lib/components/Merging/types.ts

@@ -1,4 +1,4 @@
-export type MergeStatus = 'FAILED' | 'MERGING' | 'ABORTED' | 'SUCCEEDED';
+export type MergeStatus = 'ABORTED' | 'FAILED' | 'MERGING' | 'SUCCEEDED';
 export type StatusState = {
   readonly status: MergeStatus;
   readonly total: number;

specifyweb/frontend/js_src/lib/components/Statistics/AddStatDialog.tsx

@@ -4,6 +4,7 @@ import { useBooleanState } from '../../hooks/useBooleanState';
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
 import { statsText } from '../../localization/stats';
+import { cleanThrottledPromises } from '../../utils/ajax/throttledPromise';
 import type { RA } from '../../utils/types';
 import { H3, Ul } from '../Atoms';
 import { Button } from '../Atoms/Button';
@@ -23,7 +24,6 @@ import type {
   StatFormatterSpec,
   StatLayout,
 } from './types';
-import { cleanThrottledPromises } from '../../utils/ajax/throttledPromise';
 
 export function AddStatDialog({
   defaultStatsAddLeft,

specifyweb/frontend/js_src/lib/components/Toolbar/Security.tsx

@@ -115,7 +115,7 @@ function Aside({
 }): JSX.Element {
   const availableCollections = useAvailableCollections();
   return (
-    <aside className={className.containerBase}>
+    <aside className={`${className.containerBase} md:max-w-[33vw]`}>
       {typeof institution === 'object' && (
         <section>
           <H3>{schema.models.Institution.label}</H3>

specifyweb/frontend/js_src/lib/localization/preferences.ts

@@ -1819,7 +1819,7 @@ export const preferencesText = createDictionary({
   },
   detailedView: {
     'en-us': 'Detailed view',
-  },  
+  },
   attachmentPreviewMode: {
     'en-us': 'Attachment preview mode',
     'de-ch': 'Anhang-Vorschaumodus',