From 932ec4cdd6e56e8e6a5638d8412fe7ea3e8b6470 Mon Sep 17 00:00:00 2001
From: ByMykel <38622893+ByMykel@users.noreply.github.com>
Date: Sat, 25 Nov 2023 15:17:16 +0100
Subject: [PATCH] Fix missing padding-right in toast (#2251)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before:
<img width="699" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/8b974a6d-aa1d-4f5b-8cf5-c508ddd64f9f">

After:
<img width="702" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/67abb0e6-1915-4a77-9c09-c5f6cb51d202">


It seems like the padding-right is missing.


![image](https://github.com/tldraw/tldraw/assets/38622893/6751f5d0-449c-48da-9e01-e0dd46889d27)


### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Go to https://makereal.tldraw.com/.
2. Click 'Make real' without having any changes.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fox padding-right in toast content.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
---
 packages/tldraw/src/lib/ui.css                | 14 +-------
 .../src/lib/ui/components/DebugPanel.tsx      | 35 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css
index d19a40d0d..9d3fb5fc5 100644
--- a/packages/tldraw/src/lib/ui.css
+++ b/packages/tldraw/src/lib/ui.css
@@ -1067,7 +1067,6 @@
 	min-width: 200px;
 	display: flex;
 	flex-direction: row;
-	gap: var(--space-3);
 	background-color: var(--color-panel);
 	box-shadow: var(--shadow-2);
 	border-radius: var(--radius-3);
@@ -1079,23 +1078,13 @@
 	max-width: 280px;
 }
 
-.tlui-toast__main:nth-child(1) > .tlui-toast__content {
-	padding-left: var(--space-4);
-}
-
 .tlui-toast__content {
-	padding-left: 0px;
-	padding-top: var(--space-4);
-	padding-bottom: var(--space-4);
+	padding: var(--space-4);
 	display: flex;
 	flex-direction: column;
 	gap: var(--space-3);
 }
 
-.tlui-toast__content:not(:only-child) {
-	padding-bottom: var(--space-2);
-}
-
 .tlui-toast__title {
 	font-weight: bold;
 	color: var(--color-text-1);
@@ -1109,7 +1098,6 @@
 }
 
 .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
-	margin-left: -12px;
 	padding-left: 0px;
 }
 
diff --git a/packages/tldraw/src/lib/ui/components/DebugPanel.tsx b/packages/tldraw/src/lib/ui/components/DebugPanel.tsx
index 5bb8c21b8..da913c8d5 100644
--- a/packages/tldraw/src/lib/ui/components/DebugPanel.tsx
+++ b/packages/tldraw/src/lib/ui/components/DebugPanel.tsx
@@ -97,7 +97,40 @@ const DebugMenuContent = track(function DebugMenuContent({
 							id: uniqueId(),
 							title: 'Something happened',
 							description: 'Hey, attend to this thing over here. It might be important!',
-							keepOpen: false,
+							keepOpen: true,
+							// icon?: string
+							// title?: string
+							// description?: string
+							// actions?: TLUiToastAction[]
+						})
+						addToast({
+							id: uniqueId(),
+							title: 'Something happened',
+							description: 'Hey, attend to this thing over here. It might be important!',
+							keepOpen: true,
+							actions: [
+								{
+									label: 'Primary',
+									type: 'primary',
+									onClick: () => {
+										void null
+									},
+								},
+								{
+									label: 'Normal',
+									type: 'normal',
+									onClick: () => {
+										void null
+									},
+								},
+								{
+									label: 'Danger',
+									type: 'danger',
+									onClick: () => {
+										void null
+									},
+								},
+							],
 							// icon?: string
 							// title?: string
 							// description?: string