From fa83da6085476ae5d5563e494c1001838a05383c Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 12 Jan 2024 08:01:15 -0800
Subject: [PATCH] Fix staging banner (#1573)

* Revert "Add API indicator and staging banner (#1563)"

This reverts commit a75de51198d59a6dc126ba5a92fa17c30bbb8b2e.

* Revert "Revert "Add API indicator and staging banner (#1563)""

This reverts commit b4d3b56b33ca4080fa3bc1b7a2dde7b21ba18e51.

* Fix banner to only show on staging

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
---
 layouts/default.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 883f114d..b1c41cb9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,7 +16,13 @@
         </nuxt-link>
       </template>
     </div>
-    <div v-if="!cosmetics.hideStagingBanner" class="site-banner site-banner--warning">
+    <div
+      v-if="
+        config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com') &&
+        !cosmetics.hideStagingBanner
+      "
+      class="site-banner site-banner--warning"
+    >
       <div class="site-banner__title">
         <IssuesIcon />
         <span> You’re viewing Modrinth’s staging environment </span>
@@ -1220,7 +1226,7 @@ export default defineNuxtComponent({
   gap: 0.5rem;
   grid-template: 'title actions' 'description actions';
   padding-block: var(--gap-xl);
-  padding-inline: calc((100% - 80rem) / 2 + var(--gap-md));
+  padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
 
   .site-banner__title {
     grid-area: title;
@@ -1235,6 +1241,7 @@ export default defineNuxtComponent({
       color: var(--color-red);
       width: 1.5rem;
       height: 1.5rem;
+      flex-shrink: 0;
     }
   }