IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: prevent long category names from overflowing on mobile topic list (#31335)

Browse Source 
Before:

<img
src="https://github.com/user-attachments/assets/a66dcbcd-3363-404b-bd12-422b536bad2c"
width="300" />

After: 

<img
src="https://github.com/user-attachments/assets/511a6545-c1f4-47bb-90f7-02e723ac08f7"
width="300" />
This commit is contained in:
Kris 2025-02-13 16:26:22 -05:00 committed by GitHub
parent 321a220b49
commit d8b45be25a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/stylesheets/common/base/edit-category.scss
View File

@ -15,17 +15,27 @@ div.edit-category {
grid-area: header;
grid-column: 1 / span 2;
display: flex;
gap: 1em;
justify-content: space-between;
align-self: start;
background-color: var(--primary-very-low);
padding: 20px;
h2 {
@include ellipsis;
}
.category-back {
height: 2em;
align-self: flex-end;
flex: 0 0 auto;
}
}
.edit-category-title {
min-width: 0;
}
.edit-category-nav {
grid-area: sidebar;
grid-row: 2 / span 3;

1
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -171,6 +171,7 @@
margin: 0;
.footer-message {
overflow-wrap: break-word;
padding-top: 4em;
}
}

1
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -127,6 +127,7 @@
.badge-category__wrapper {
vertical-align: bottom;
margin-right: 0.5em;
max-width: 100%;
}
.badge-wrapper,