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.

Sign up for GitHub

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

Jump to bottom

Add width to roomTile_nameStack in _InviteDialog.scss #8092

Closed
wants to merge 1 commit into from
Closed

Add width to roomTile_nameStack in _InviteDialog.scss #8092

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/views/dialogs/_InviteDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ limitations under the License.
.mx_InviteDialog_roomTile_nameStack {
display: inline-block;
overflow: hidden;
width: calc(70%);
Copy link
Member

Choose a reason for hiding this comment

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

why 70%?

Copy link
Author

Choose a reason for hiding this comment

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

It was chosen so that the layout remained intact, because if it was set to 100% the name would appear under the users avatar like in the first picture, it would also push the "23 hours ago" underneath the box. Setting it to 70% fixed those issues.

Copy link
Author

Choose a reason for hiding this comment

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

@turt2live

Copy link
Contributor

@luixxiul luixxiul Mar 26, 2022 •
edited

Choose a reason for hiding this comment

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

By setting so, the time strings can be placed under the nameStack due to float and/or text-align stuff.

before

It looks like the display style of roomTile in which they are placed needs changing with flex/grid. From my trial I guess that should be the most straightforward way.

temp

I am not sure if ellipsis functionality should be enabled here from the perspective of UX, though.

Copy link
Member

Choose a reason for hiding this comment

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

The issue with 70% is that the UI cuts off prematurely in the screenshots, so I suspect the change is a bit more involved than what is implied here.

Also, magic numbers like these need comments in the code.

}

.mx_InviteDialog_roomTile_name {
Expand Down