Fix missing padding-right in toast (#2251)

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>
This commit is contained in:
ByMykel 2023-11-25 15:17:16 +01:00 committed by GitHub
parent 18cd0fd246
commit 932ec4cdd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 14 deletions

View file

@ -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;
}

View file

@ -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