minor style improvements

Author: sdaqo

Diff for: library_db/routes/media/templates/media/medialist_grid.html

@@ -63,7 +63,7 @@
   </style>
 {% endblock %}
 {% block content %}
-  <div class="modal fade "
+  <div class="modal fade"
        id="mediaModal"
        tabindex="-1"
        aria-labelledby="exampleModalLabel">
@@ -176,9 +176,10 @@ <h1 class="modal-title fs-5" id="modalLabel"></h1>
       <div class="toast-body" id="infoToastBody"></div>
     </div>
   </div>
-  <div class="container mt-3 mb-2">
-    <div class="d-flex flex-wrap">
-      <div class="d-flex flex-column me-4">
+  <!-- Container With Media -->
+  <div class="container mt-3">
+    <div class="d-flex flex-wrap" style="gap: 1.7%">
+      <div class="d-flex flex-column">
         <span class="pb-1 {% if darkmode %} text-white{% endif %}"
               style="font-weight: 430">Layout</span>
         <div class="btn-group mb-3">
@@ -202,7 +203,7 @@ <h1 class="modal-title fs-5" id="modalLabel"></h1>
           </button>
         </div>
       </div>
-      <div class="d-flex flex-column me-4">
+      <div class="d-flex flex-column">
         <span class="pb-1 {% if darkmode %} text-white{% endif %}"
               style="font-weight: 430">Sort Field</span>
         <div class="btn-group">
@@ -224,7 +225,7 @@ <h1 class="modal-title fs-5" id="modalLabel"></h1>
           </ul>
         </div>
       </div>
-      <div class="d-flex flex-column me-4">
+      <div class="d-flex flex-column">
         <span class="pb-1 {% if darkmode %} text-white{% endif %}"
               style="font-weight: 430">Status</span>
         <div class="btn-group">
@@ -285,13 +286,13 @@ <h1 class="modal-title fs-5" id="modalLabel"></h1>
         </div>
       {% endfor %}
     </div>
-    <nav>
+    <nav class="mt-3">
       <ul class="pagination justify-content-center">
         <li class="page-item {% if page + 1 == 1 %} disabled{% endif %}">
           <a class="page-link"
              href="{{ update_query_params(url, page=page - 1)}}"
              aria-label="Previous">
-            <span aria-hidden="true">&laquo;</span>
+            <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
           </a>
         </li>
         {% for i in range(page_count) %}
@@ -303,7 +304,7 @@ <h1 class="modal-title fs-5" id="modalLabel"></h1>
           <a class="page-link"
              href="{{ update_query_params(url, page=page + 1)}}"
              aria-label="Next">
-            <span aria-hidden="true">&raquo;</span>
+            <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
           </a>
         </li>
       </ul>