Skip to content

fix: fix mobile-first long word bug #3228

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

Merged
merged 1 commit into from
Apr 7, 2025
Merged

fix: fix mobile-first long word bug #3228

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/vue/src/form-item/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
v-if="slots.label || label"
:class="
m(
'py-3 sm:py-1.5 sm:min-h-[theme(spacing.7)] relative align-bottom float-left text-sm pr-3 sm:pr-4 box-border leading-5',
'py-3 sm:py-1.5 sm:min-h-[theme(spacing.7)] relative align-bottom float-left text-sm pr-3 sm:pr-4 box-border leading-5 shrink-0',
Copy link

Choose a reason for hiding this comment

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

Adding shrink-0 ensures that the label does not shrink, which is important for maintaining layout integrity when long words are present.

'overflow-hidden text-ellipsis',
state.labelPosition === 'top'
? 'float-none inline-block text-left sm:text-left leading-none px-0 pt-0 pb-1.5 h-auto min-h-0 sm:py-0 sm:pb-1 sm:min-h-[theme(spacing.0)]'
Expand Down Expand Up @@ -73,7 +73,7 @@
data-tag="tiny-form-item-inline"
:class="
m(
`flex-1 m-0 sm:m-auto relative sm:pt-0 sm:top-auto text-sm after:content-[''] after:table after:clear-both before:content-[''] before:table [&_button:not(:last-child)]:mr-2`,
`min-w-0 flex-1 m-0 sm:m-auto relative sm:pt-0 sm:top-auto text-sm after:content-[''] after:table after:clear-both before:content-[''] before:table [&_button:not(:last-child)]:mr-2`,
Copy link

Choose a reason for hiding this comment

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

The addition of min-w-0 is crucial for preventing overflow issues with long words, ensuring that the flex container can shrink appropriately.

'[&_[data-tag=tiny-checkbox]]:py-0 [&_[data-tag=tiny-input]]:w-full',
'[&_[data-tag=tiny-input]_textarea]:px-0 sm:[&_[data-tag=tiny-input]_textarea]:px-3 [&_[data-tag=tiny-input]_textarea]:w-full [&_[data-tag=tiny-input]_textarea]:pt-1 sm:[&_[data-tag=tiny-input]_textarea]:pt-2',
state.formInline ? 'align-sub leading-none' : '',
Expand Down
Loading