From a7db66e8abd6e8c65e57c34141dbd0a7e4e98ddf Mon Sep 17 00:00:00 2001
From: "Ella E." <ella.estigoy@discourse.org>
Date: Mon, 9 Sep 2024 15:33:43 -0600
Subject: [PATCH] FIX: Prevent layout shift caused by locale description length
 (#28807)

* FIX: Prevent layout shift caused by locale description length

* Fix linting error

* Apply prettier
---
 .../admin/addon/templates/admin-badges.hbs    | 33 +++++++++++--------
 .../stylesheets/common/admin/badges.scss      |  1 +
 .../stylesheets/mobile/admin_badges.scss      |  1 +
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/admin-badges.hbs b/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
index 4e83fb670ef..0191e310bd1 100644
--- a/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
+++ b/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
@@ -34,19 +34,24 @@
       />
     </:actions>
   </AdminPageHeader>
-  <div class="content-list">
-    <ul class="admin-badge-list">
-      {{#each this.model as |badge|}}
-        <li class="admin-badge-list-item">
-          <LinkTo @route={{this.selectedRoute}} @model={{badge.id}}>
-            <BadgeButton @badge={{badge}} />
-            {{#if badge.newBadge}}
-              <span class="list-badge">{{i18n "filters.new.lower_title"}}</span>
-            {{/if}}
-          </LinkTo>
-        </li>
-      {{/each}}
-    </ul>
+
+  <div class="admin-container">
+    <div class="content-list">
+      <ul class="admin-badge-list">
+        {{#each this.model as |badge|}}
+          <li class="admin-badge-list-item">
+            <LinkTo @route={{this.selectedRoute}} @model={{badge.id}}>
+              <BadgeButton @badge={{badge}} />
+              {{#if badge.newBadge}}
+                <span class="list-badge">{{i18n
+                    "filters.new.lower_title"
+                  }}</span>
+              {{/if}}
+            </LinkTo>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+    {{outlet}}
   </div>
-  {{outlet}}
 </div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index d383afbcca7..59cf63f1f94 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -5,6 +5,7 @@
   .badges {
     display: flex;
     flex-wrap: wrap;
+    flex-direction: column;
     .badges-header {
       display: flex;
       align-items: center;
diff --git a/app/assets/stylesheets/mobile/admin_badges.scss b/app/assets/stylesheets/mobile/admin_badges.scss
index 40e7334d0f6..3dfff599d31 100644
--- a/app/assets/stylesheets/mobile/admin_badges.scss
+++ b/app/assets/stylesheets/mobile/admin_badges.scss
@@ -4,6 +4,7 @@
       margin: 0 0.25em;
       .content-list {
         flex: 0 0 100%;
+        width: 100%;
         .admin-badge-list {
           max-height: 40vh;
           margin-right: 0;