From 538b0ccac8fa906da804a6af620456b826f8b266 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 16 May 2024 16:18:10 +0200
Subject: [PATCH] Fix issue/patch placeholder centering on mobile

---
 src/views/projects/Issues.svelte  | 14 ++++++++++++--
 src/views/projects/Patches.svelte | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/views/projects/Issues.svelte b/src/views/projects/Issues.svelte
index 11cef18c5..7234a5680 100644
--- a/src/views/projects/Issues.svelte
+++ b/src/views/projects/Issues.svelte
@@ -91,6 +91,17 @@
     background-color: var(--color-fill-counter);
     color: var(--color-foreground-dim);
   }
+  .placeholder {
+    height: calc(100% - 4rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @media (max-width: 719.98px) {
+    .placeholder {
+      height: calc(100vh - 10rem);
+    }
+  }
 </style>
 
 <Layout {baseUrl} {project} activeTab="issues">
@@ -184,8 +195,7 @@
   {/if}
 
   {#if project.issues[state] === 0}
-    <div
-      style="height: calc(100% - 4rem); display: flex; align-items: center; justify-content: center;">
+    <div class="placeholder">
       <Placeholder iconName="no-issues" caption={`No ${state} issues`} />
     </div>
   {/if}
diff --git a/src/views/projects/Patches.svelte b/src/views/projects/Patches.svelte
index 4fd1d19f3..3e56b5e83 100644
--- a/src/views/projects/Patches.svelte
+++ b/src/views/projects/Patches.svelte
@@ -106,6 +106,17 @@
     flex-direction: column;
     gap: 1rem;
   }
+  .placeholder {
+    height: calc(100% - 4rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @media (max-width: 719.98px) {
+    .placeholder {
+      height: calc(100vh - 10rem);
+    }
+  }
 </style>
 
 <Layout {baseUrl} {project} activeTab="patches">
@@ -203,8 +214,7 @@
   {/if}
 
   {#if project.patches[state] === 0}
-    <div
-      style="height: calc(100% - 4rem); display: flex; align-items: center; justify-content: center;">
+    <div class="placeholder">
       <Placeholder iconName="no-patches" caption={`No ${state} patches`} />
     </div>
   {/if}