From 43ca263eac95d63a57e7fb5ba83f6c7f52945cce Mon Sep 17 00:00:00 2001
From: tagmeh <tagmeh@gmail.com>
Date: Wed, 6 Aug 2025 18:14:35 -0500
Subject: [PATCH] Fixed rectangle book cover sub-sorting and conditional
 divider display.

---
 client/components/covers/SortedCovers.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/components/covers/SortedCovers.vue b/client/components/covers/SortedCovers.vue
index 4f75df7bb..9cb02fdb8 100644
--- a/client/components/covers/SortedCovers.vue
+++ b/client/components/covers/SortedCovers.vue
@@ -15,8 +15,8 @@
       </template>
     </div>
 
-    <!-- Divider if both sections have covers -->
-    <div v-if="primaryCovers.length && secondaryCovers.length" class="w-full border-b border-white/10 my-4"></div>
+    <!-- Divider only shows when there are covers in both sections -->
+    <div v-if="hasBothCoverTypes" class="w-full border-b border-white/10 my-4"></div>
 
     <!-- Secondary Covers Section (opposite aspect ratio) -->
     <div v-if="secondaryCovers.length" class="flex items-center flex-wrap justify-center">
@@ -57,9 +57,10 @@ export default {
   computed: {
     // Sort covers by dimension and size
     sortedCovers() {
+      // sort by height, then sub-sort by width
       return [...this.covers].sort((a, b) => {
-        // Sort by area (width * height)
-        return a.width * a.height - b.width * b.height
+        // Sort by height first, then by width
+        return a.height - b.height || a.width - b.width
       })
     },
     // Get square covers (width === height)
@@ -77,6 +78,10 @@ export default {
     // Determine secondary covers (opposite of primary)
     secondaryCovers() {
       return this.bookCoverAspectRatio === 1 ? this.rectangleCovers : this.squareCovers
+    },
+    // Check if we have both types of covers to show the divider
+    hasBothCoverTypes() {
+      return this.primaryCovers.length > 0 && this.secondaryCovers.length > 0
     }
   }
 }