FIX: Prevent layout shift caused by locale description length (#28807)

* FIX: Prevent layout shift caused by locale description length

* Fix linting error

* Apply prettier
This commit is contained in:
Ella E. 2024-09-09 15:33:43 -06:00 committed by GitHub
parent e4457ed2c6
commit a7db66e8ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 14 deletions

View File

@ -34,19 +34,24 @@
/> />
</:actions> </:actions>
</AdminPageHeader> </AdminPageHeader>
<div class="content-list">
<ul class="admin-badge-list"> <div class="admin-container">
{{#each this.model as |badge|}} <div class="content-list">
<li class="admin-badge-list-item"> <ul class="admin-badge-list">
<LinkTo @route={{this.selectedRoute}} @model={{badge.id}}> {{#each this.model as |badge|}}
<BadgeButton @badge={{badge}} /> <li class="admin-badge-list-item">
{{#if badge.newBadge}} <LinkTo @route={{this.selectedRoute}} @model={{badge.id}}>
<span class="list-badge">{{i18n "filters.new.lower_title"}}</span> <BadgeButton @badge={{badge}} />
{{/if}} {{#if badge.newBadge}}
</LinkTo> <span class="list-badge">{{i18n
</li> "filters.new.lower_title"
{{/each}} }}</span>
</ul> {{/if}}
</LinkTo>
</li>
{{/each}}
</ul>
</div>
{{outlet}}
</div> </div>
{{outlet}}
</div> </div>

View File

@ -5,6 +5,7 @@
.badges { .badges {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column;
.badges-header { .badges-header {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -4,6 +4,7 @@
margin: 0 0.25em; margin: 0 0.25em;
.content-list { .content-list {
flex: 0 0 100%; flex: 0 0 100%;
width: 100%;
.admin-badge-list { .admin-badge-list {
max-height: 40vh; max-height: 40vh;
margin-right: 0; margin-right: 0;