From 696ab331456892ff7dc0a7d6837faeb731f4b0f1 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 4 Nov 2024 11:46:39 -0600
Subject: [PATCH] Website: Update platform icons on query details page (#23491)

Changes:
- Updated position and spacing of platform icons on the query details
page to prevent style issues on multi-platform policies
---
 website/assets/styles/pages/query-detail.less |  1 +
 website/views/pages/query-detail.ejs          | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/website/assets/styles/pages/query-detail.less b/website/assets/styles/pages/query-detail.less
index 56cf5cb71a..ab5a75d544 100644
--- a/website/assets/styles/pages/query-detail.less
+++ b/website/assets/styles/pages/query-detail.less
@@ -214,6 +214,7 @@
     }
     img {
       height: 24px;
+      margin-right: 16px;
     }
   }
   [purpose='edit-button'] {
diff --git a/website/views/pages/query-detail.ejs b/website/views/pages/query-detail.ejs
index 332fded077..e9af0ffc12 100644
--- a/website/views/pages/query-detail.ejs
+++ b/website/views/pages/query-detail.ejs
@@ -53,10 +53,12 @@
           <div purpose="right-sidebar" class="d-flex flex-column">
             <div purpose="policy-platform">
               <h4>Platform</h4>
-              <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" v-if="query.platform.includes('darwin')"/>
-              <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" v-if="query.platform.includes('windows')"/>
-              <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" v-if="query.platform.includes('linux')"/>
-              <img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" v-if="query.platform.includes('chrome')"/>
+              <div class="d-flex flex-row">
+                <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" v-if="query.platform.includes('darwin')"/>
+                <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" v-if="query.platform.includes('windows')"/>
+                <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" v-if="query.platform.includes('linux')"/>
+                <img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" v-if="query.platform.includes('chrome')"/>
+              </div>
             </div>
             <div purpose="social-share-buttons" class="d-flex flex-column order-lg-2 order-1">
               <p><strong>Share</strong></p>