Skip to content

fix: Alert.Inline Text Wrapping #347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Jul 16, 2025
Merged

fix: Alert.Inline Text Wrapping #347

merged 3 commits into from
Jul 16, 2025

Conversation

@HarshMN2345
Copy link
Member

@HarshMN2345 HarshMN2345 commented Jul 14, 2025

Fix Alert.Inline Text Wrapping

This PR fixes text wrapping issues in the Alert.Inline component where text would break awkwardly, especially with multi-line content.

Changes

  • Added proper text content styling to prevent awkward line breaks
  • Improved text readability with consistent line height and spacing
  • Added proper handling for nested elements (paragraphs, lists)
  • Fixed spacing between title and content

Before

image

After

image

@changeset-bot
Copy link

changeset-bot bot commented Jul 14, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 0a9df07

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR 
Some errors occurred when validating the changesets config:
The package or glob expression "@appwrite.io/pink" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-icons" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/kitchensink" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/fonts" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-design" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

@HarshMN2345 HarshMN2345 requested a review from ItzNotABug July 14, 2025 14:35
@github-actions
Copy link
Contributor

github-actions bot commented Jul 14, 2025

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 14, 2025 •
edited
Loading

🚀 Previews available on pkg.vc!

📦 @appwrite.io/pink-svelte

Install @appwrite.io/pink-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0a9df07

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte~fix-SER-112-break-line-alerts
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte!347

📦 @appwrite.io/pink-icons-svelte

Install @appwrite.io/pink-icons-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@0a9df07

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte~fix-SER-112-break-line-alerts
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte!347

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jul 14, 2025 •
edited
Loading

Open in StackBlitz

npm i https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@347

npm i https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@347

commit: 0a9df07

ItzNotABug
ItzNotABug requested changes Jul 15, 2025
View reviewed changes
v2/pink-sb/src/lib/alert/Inline.svelte Outdated
<Stack>
{#if title || $$slots.default}
<Stack gap="none">
<div class="content">
Copy link
Member

@ItzNotABug ItzNotABug Jul 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why was the Stack removed? We can use it without the manual css.

v2/pink-sb/src/lib/alert/Inline.svelte Outdated
Comment on lines 55 to 57
<span class="inline-content">
<slot />
</span>
Copy link
Member

@ItzNotABug ItzNotABug Jul 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we try using a simple div? If its just an inlining issue, a single wrapper should be fine without any extra classes.

@HarshMN2345 HarshMN2345 requested a review from ItzNotABug July 15, 2025 06:22
@ItzNotABug ItzNotABug merged commit d9ba720 into next Jul 16, 2025
3 of 4 checks passed
@ItzNotABug ItzNotABug deleted the fix-SER-112-break-line-alerts branch July 16, 2025 05:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ItzNotABug ItzNotABug ItzNotABug approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@HarshMN2345 @ItzNotABug