refactor: tighten types and reuse instrument UI

src/pages/card/ui/CardPage/CardPage.module.css

@@ -32,19 +32,6 @@
 .operation {
 	min-width: 0;
 }
-.operation p {
-	white-space: normal;
-	overflow-wrap: anywhere;
-}
-.operation > div > div {
-	min-width: 0;
-}
-@media (min-width: 36em) {
-	.operation > div:first-child {
-		grid-template-columns: auto minmax(0, 1fr) minmax(0, 40%);
-	}
-}
-
 .operations[data-pending] {
 	opacity: 0.55;
 }

src/pages/card/ui/CardPage/CardPage.view.tsx

@@ -102,12 +102,13 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
 									)}
 								/>
 							)}
-							initial={row.title[0]}
+							initial={row.title.charAt(0)}
 							metadata={row.metadata}
 							title={row.title}
 							tone={row.tone}
 							value={row.value}
 							valueLabel={t(`bank.kinds.${row.item.kind}`)}
+							wrap
 						/>
 					</section>
 				);
@@ -128,6 +129,8 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
 			</LoadingSkeleton>
 		);
 	}
+
+	return null;
 };
 
 const CardPageView: FC<CardPageViewProps> = (props) => {

src/pages/card/ui/CardPage/CardPagePresentation.vm.ts

@@ -1,6 +1,6 @@
+import type { Pagination } from "@mantine/core";
 import type { ComponentProps } from "react";
 
-import { Pagination } from "@mantine/core";
 import { useLayoutEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 

src/pages/card/ui/OperationForm/OperationFields.vm.ts

@@ -1,6 +1,6 @@
+import type { DateInput } from "@mantine/dates";
 import type { ComponentProps } from "react";
 
-import { DateInput } from "@mantine/dates";
 import { useController, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 

src/pages/card/ui/OperationForm/OperationForm.module.css

@@ -1,6 +0,0 @@
-.fieldset {
-	border: 0;
-	margin: 0;
-	padding: 0;
-	min-width: 0;
-}

src/pages/card/ui/OperationForm/OperationForm.schema.ts

@@ -90,7 +90,7 @@ function createOperationSchema({
 			&& !categories?.some(
 				c =>
 					c.id
-					=== (values.categoryId || categories?.find(c => c.isDefault)?.id),
+					=== (values.categoryId || categories.find(c => c.isDefault)?.id),
 			)
 		)
 			context.addIssue({

src/pages/card/ui/OperationForm/OperationForm.test.tsx

@@ -467,7 +467,7 @@ describe("OperationForm", () => {
 		expect(screen.getByLabelText(/Сумма/)).toHaveValue("150");
 		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
 		await waitFor(() => expect(bodies).toHaveLength(2));
-		expect(bodies[1].version).toBe(1);
+		expect(bodies[1]?.version).toBe(1);
 		fireEvent.click(
 			screen.getByRole("button", { name: "Использовать актуальную версию 2" }),
 		);

src/pages/card/ui/OperationForm/OperationForm.view.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode, SubmitEventHandler } from "react";
 
-import {
-	Button,
+import { Button,
+	Fieldset,
 	Group,
 	Modal,
 	Select,
@@ -20,7 +20,6 @@ import { formatMoney } from "@/shared/lib";
 import type { Choice, OperationFieldsProps } from "./OperationForm.types";
 
 import { useOperationFieldsVm } from "./OperationFields.vm";
-import classes from "./OperationForm.module.css";
 import { useRefundFieldsVm } from "./RefundFields.vm";
 
 const OperationFields: FC<OperationFieldsProps> = (props) => {
@@ -203,7 +202,7 @@ const OperationFormView: FC<OperationFormViewProps> = (props) => {
 			title={displayTitle}
 		>
 			<form onSubmit={props.onSubmit}>
-				<fieldset className={classes.fieldset} disabled={props.pending}>
+				<Fieldset disabled={props.pending} variant="unstyled">
 					<Stack>
 						<OperationFields {...props.fields} />
 
@@ -283,7 +282,7 @@ const OperationFormView: FC<OperationFormViewProps> = (props) => {
 							</Button>
 						</Group>
 					</Stack>
-				</fieldset>
+				</Fieldset>
 			</form>
 		</Modal>
 	);