From d1b3b85584074e28bbb55d0e903f80f00b51df1a Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Mon, 30 Dec 2024 18:09:04 -0700
Subject: [PATCH] DEV: Add element wrapper to the body and screenshot (#30497)

---
 .../components/dashboard-new-feature-item.gjs | 118 +++++++++---------
 1 file changed, 61 insertions(+), 57 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs b/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs
index 11e83d33592..dd3f94eb17e 100644
--- a/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs
+++ b/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs
@@ -92,65 +92,69 @@ export default class DiscourseNewFeatureItem extends Component {
           {{/if}}
         </div>
 
-        {{#if @item.screenshot_url}}
-          <img
-            src={{@item.screenshot_url}}
-            class="admin-new-feature-item__screenshot"
-            alt={{@item.title}}
-          />
-        {{/if}}
-
-        <div class="admin-new-feature-item__body">
-          <div class="admin-new-feature-item__feature-description">
-            <CookText @rawText={{@item.description}} />
-
-            {{#if @item.link}}
-              <a
-                href={{@item.link}}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="admin-new-feature-item__learn-more"
-              >
-                {{i18n "admin.dashboard.new_features.learn_more"}}
-              </a>
-            {{/if}}
-          </div>
-          {{#if @item.experiment_setting}}
-            <div class="admin-new-feature-item__feature-toggle">
-              <DTooltip>
-                <:trigger>
-                  <DToggleSwitch
-                    @state={{this.experimentEnabled}}
-                    {{on "click" this.toggleExperiment}}
-                  />
-                </:trigger>
-                <:content>
-                  <div class="admin-new-feature-item__tooltip">
-                    <div class="admin-new-feature-item__tooltip-header">
-                      {{i18n
-                        (if
-                          this.experimentEnabled
-                          "admin.dashboard.new_features.experiment_tooltip.title_enabled"
-                          "admin.dashboard.new_features.experiment_tooltip.title_disabled"
-                        )
-                      }}
-                    </div>
-                    <div class="admin-new-feature-item__tooltip-content">
-                      {{htmlSafe
-                        (i18n
-                          (if
-                            this.experimentEnabled
-                            "admin.dashboard.new_features.experiment_tooltip.content_enabled"
-                            "admin.dashboard.new_features.experiment_tooltip.content_disabled"
-                          )
-                        )
-                      }}
-                    </div>
-                  </div>
-                </:content>
-              </DTooltip>
+        <div class="admin-new-feature-item__body-wrapper">
+          {{#if @item.screenshot_url}}
+            <div class="admin-new-feature-item__img-container">
+              <img
+                src={{@item.screenshot_url}}
+                class="admin-new-feature-item__screenshot"
+                alt={{@item.title}}
+              />
             </div>
           {{/if}}
+
+          <div class="admin-new-feature-item__body">
+            <div class="admin-new-feature-item__feature-description">
+              <CookText @rawText={{@item.description}} />
+
+              {{#if @item.link}}
+                <a
+                  href={{@item.link}}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="admin-new-feature-item__learn-more"
+                >
+                  {{i18n "admin.dashboard.new_features.learn_more"}}
+                </a>
+              {{/if}}
+            </div>
+            {{#if @item.experiment_setting}}
+              <div class="admin-new-feature-item__feature-toggle">
+                <DTooltip>
+                  <:trigger>
+                    <DToggleSwitch
+                      @state={{this.experimentEnabled}}
+                      {{on "click" this.toggleExperiment}}
+                    />
+                  </:trigger>
+                  <:content>
+                    <div class="admin-new-feature-item__tooltip">
+                      <div class="admin-new-feature-item__tooltip-header">
+                        {{i18n
+                          (if
+                            this.experimentEnabled
+                            "admin.dashboard.new_features.experiment_tooltip.title_enabled"
+                            "admin.dashboard.new_features.experiment_tooltip.title_disabled"
+                          )
+                        }}
+                      </div>
+                      <div class="admin-new-feature-item__tooltip-content">
+                        {{htmlSafe
+                          (i18n
+                            (if
+                              this.experimentEnabled
+                              "admin.dashboard.new_features.experiment_tooltip.content_enabled"
+                              "admin.dashboard.new_features.experiment_tooltip.content_disabled"
+                            )
+                          )
+                        }}
+                      </div>
+                    </div>
+                  </:content>
+                </DTooltip>
+              </div>
+            {{/if}}
+          </div>
         </div>
       </div>
     </div>