Skip to content
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.

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

Already on GitHub? Sign in to your account

UX: Fix alignment in chat message #1076

Merged

Conversation

Vivihung
Copy link
Member

Motivation and Context

The message user name and timestamp alignment is off in the chat history item.
image
Left: The current rendering
Right: The expected result.

Description

  • Replace HTML tag from Label to Text (span) for semantic reasons.
  • Label sets the wong line-height that causes the problem. Replacing it with Text fix the alignment.
  • Manually add font-size and weight styles back because they were covered by Label size property.

Contribution Checklist

@Vivihung Vivihung added bug Something isn't working PR: ready for review All feedback addressed, ready for reviews typescript labels May 18, 2023
@Vivihung Vivihung changed the title UX: Fix alignment in chat message. UX: Fix alignment in chat message May 18, 2023
hathind-ms
hathind-ms previously approved these changes May 18, 2023
teresaqhoang
teresaqhoang previously approved these changes May 18, 2023
@teresaqhoang teresaqhoang dismissed stale reviews from hathind-ms and themself via 938f5be May 18, 2023 20:51
reordering imports from merge conflicts
@hathind-ms hathind-ms merged commit b8171cb into microsoft:main May 18, 2023
19 checks passed
shawncal pushed a commit to johnoliver/semantic-kernel that referenced this pull request May 19, 2023
### Motivation and Context
The message user name and timestamp alignment is off in the chat history
item.
<img width="1089" alt="image"
src="https://github.com/microsoft/semantic-kernel/assets/4814277/b7d6e644-ed53-4848-84ee-65d90519fe77">
Left: The current rendering
Right: The expected result.

### Description
* Replace HTML tag from Label to Text (span) for semantic reasons. 
* Label sets the wong line-height that causes the problem. Replacing it
with Text fix the alignment.
* Manually add font-size and weight styles back because they were
covered by Label size property.

### Contribution Checklist
<!-- Before submitting this PR, please make sure: -->
- [x] The code builds clean without any errors or warnings
- [x] The PR follows SK Contribution Guidelines
(https://github.com/microsoft/semantic-kernel/blob/main/CONTRIBUTING.md)
~- [ ] The code follows the .NET coding conventions
(https://learn.microsoft.com/dotnet/csharp/fundamentals/coding-style/coding-conventions)
verified with `dotnet format`~
~- [ ] All unit tests pass, and I have added new tests where possible~
- [x] I didn't break anyone 馃槃

---------

Co-authored-by: Teresa Hoang <125500434+teresaqhoang@users.noreply.github.com>
golden-aries pushed a commit to golden-aries/semantic-kernel that referenced this pull request Oct 10, 2023
### Motivation and Context
The message user name and timestamp alignment is off in the chat history
item.
<img width="1089" alt="image"
src="https://github.com/microsoft/semantic-kernel/assets/4814277/b7d6e644-ed53-4848-84ee-65d90519fe77">
Left: The current rendering
Right: The expected result.

### Description
* Replace HTML tag from Label to Text (span) for semantic reasons. 
* Label sets the wong line-height that causes the problem. Replacing it
with Text fix the alignment.
* Manually add font-size and weight styles back because they were
covered by Label size property.

### Contribution Checklist
<!-- Before submitting this PR, please make sure: -->
- [x] The code builds clean without any errors or warnings
- [x] The PR follows SK Contribution Guidelines
(https://github.com/microsoft/semantic-kernel/blob/main/CONTRIBUTING.md)
~- [ ] The code follows the .NET coding conventions
(https://learn.microsoft.com/dotnet/csharp/fundamentals/coding-style/coding-conventions)
verified with `dotnet format`~
~- [ ] All unit tests pass, and I have added new tests where possible~
- [x] I didn't break anyone 馃槃

---------

Co-authored-by: Teresa Hoang <125500434+teresaqhoang@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working PR: ready for review All feedback addressed, ready for reviews
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants