From c4a202544ca6e10be4502b81189cf6d39efc607b Mon Sep 17 00:00:00 2001
From: Thomas G <62822072+Thomasluigi07@users.noreply.github.com>
Date: Tue, 9 Aug 2022 03:47:41 +1000
Subject: [PATCH] fixed badge positioning breaking with more than 3 badges

---
 public/css/app.css                      | 15 +++++++++++++++
 resources/views/pages/profile.blade.php |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index b45cbcb..2c41e6d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -193,6 +193,21 @@
   align-items: center;
 }
 
+.badges {
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.badgecontainer {
+  width: 120px;
+  padding: 3px;
+}
+
 #navbarlogincontainer,
 #navbarsignedincontainer {
   position: relative;
diff --git a/resources/views/pages/profile.blade.php b/resources/views/pages/profile.blade.php
index 31218d9..f4ab2d7 100644
--- a/resources/views/pages/profile.blade.php
+++ b/resources/views/pages/profile.blade.php
@@ -81,11 +81,11 @@
             </div>
             <br>
             <h2>ARCHBLOX Badges</h2>
-            <div style="white-space:nowrap">
+            <div class="badges">
                 @foreach ($badges as $badge)
                     @foreach ($user->badges as $user_badge)
                         @if ($badge->id == $user_badge)
-                            <div style="width:120px;display:inline-block">
+                            <div class="badgecontainer">
                                 <img alt="{{ $badge->description }}" src="/img/badges/{{ $badge->id }}.png" width="75px" height="75px" />
                                 <h3>{{ $badge->title }}</h3>
                             </div>