Improve categories list page layout

assets/css/bobastyle.css

@@ -153,21 +153,27 @@
   border-radius: 8px;
 }
 
-@media (max-width: 360px) {
+.category-list-left {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 480px) {
   .category-list li {
     flex-direction: column;
     gap: 0;
   }
+
+  .category-list-left {
+    flex-direction: row;
+    justify-content: space-between;
+  }
 }
 
 .category-list p {
   margin: 0;
 }
 
-.category-list .category-metadata {
-  margin-left: auto;
-}
-
 .category-list a,
 .category-list .category-metadata {
   white-space: nowrap;

layouts/categories/list.html

@@ -10,11 +10,13 @@
                 {{ range . }}
                     {{ with .Page }}
                         <li>
-                            <a href="{{ .Permalink }}">
-                                <p>{{ .Title | markdownify }}</p>
-                            </a>
+                            <div class="category-list-left">
+                                <a href="{{ .Permalink }}">
+                                    <p>{{ .Title | markdownify }}</p>
+                                </a>
+                                {{ partial "post-metadata/category.html" . }}
+                            </div>
                             {{ partial "description-or-summary.html" . }}
-                            {{ partial "post-metadata/category.html" . }}
                         </li>
                     {{ end }}
                 {{ end }}