feat: simplify income page filters and payments

src/pages/account-income/ui/AccountIncomePage.module.css

@@ -1,51 +1,45 @@
-.trendChart {
-	align-items: stretch;
+.page {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.fields {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--mantine-spacing-sm);
+}
+
+.actions {
 	display: flex;
-	gap: var(--mantine-spacing-xs);
-	height: 160px;
-	overflow-x: auto;
-	padding: 0 var(--mantine-spacing-xs);
+	flex-wrap: wrap;
+	gap: var(--mantine-spacing-sm);
 }
 
-.trendColumn {
-	flex: 1 0 32px;
-	min-width: 32px;
-	position: relative;
+.entries {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	min-width: 0;
 }
 
-.baseline {
-	background: var(--mantine-color-gray-4);
-	height: 1px;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 50%;
+/* Keep the reused Ledger row's full text readable inside income cards. */
+.entries :global(.mantine-Text-root) {
+	-webkit-line-clamp: unset;
+	white-space: normal;
+	overflow-wrap: anywhere;
 }
 
-.positiveStack,
-.negativeStack {
-	display: flex;
-	left: 25%;
-	position: absolute;
-	right: 25%;
-}
+@media (max-width: 35.999em) {
+	.fields {
+		grid-template-columns: minmax(0, 1fr);
+	}
 
-.positiveStack {
-	bottom: 50%;
-	flex-direction: column-reverse;
-	top: 0;
-}
+	.actions {
+		flex-direction: column;
+	}
 
-.negativeStack {
-	bottom: 0;
-	flex-direction: column;
-	top: 50%;
-}
-
-.coupon {
-	background: var(--mantine-color-blue-5);
-}
-
-.dividend {
-	background: var(--mantine-color-grape-5);
+	.actions > button,
+	.fields input {
+		min-height: 44px;
+	}
 }