From 42cd6847a841555e79659ddb13bc83da2f0070da Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sun, 26 Apr 2026 01:32:05 -0400
Subject: [PATCH] fix(client): tighten the toast appearance

- Drop the per-type icon
- Lower min-height to 40px and tighten padding
- Thin both the active progress bar and its track to 2px and pin them to the same baseline so they sit on top of each other
---
 client/src/App.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index c07aa5496..6fff55eca 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -33,6 +33,11 @@ function App() {
 						body: {
 							backgroundColor: theme.palette.background.default,
 						},
+						".Toastify__progress-bar, .Toastify__progress-bar--bg": {
+							height: 2,
+							bottom: 0,
+							top: "auto",
+						},
 					}}
 				/>
 				<AppLayout>
@@ -41,12 +46,17 @@ function App() {
 				<ToastContainer
 					newestOnTop={true}
 					theme={mode}
+					icon={false}
 					style={
 						{
 							"--toastify-color-progress-light": theme.palette.primary.main,
 							"--toastify-color-progress-dark": theme.palette.primary.main,
+							"--toastify-toast-min-height": "40px",
+							"--toastify-toast-padding": "8px 12px",
 						} as CSSProperties
 					}
+					toastStyle={{ minHeight: 40, padding: "8px 12px" }}
+					progressStyle={{ height: 2 }}
 				/>
 			</ThemeProvider>
 		</SWRConfig>