fix(ui): improve column layout stability with vertical list sorting s…

…trategy
autobrr · Nov 7, 2024 · 82c5c4a · 82c5c4a
1 parent 08af31f
commit 82c5c4a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/AddServicesMenu.tsx b/src/components/AddServicesMenu.tsx
@@ -113,6 +113,12 @@ export function AddServicesMenu({
           text: "Settings",
           link: url ? `${url}/settings/main` : null,
         };
+      case "maintainerr":
+        return {
+          prefix: "Found in ",
+          text: "Settings",
+          link: url ? `${url}/settings/main` : null,
+        };
       default:
         return {
           prefix: "",

diff --git a/src/components/services/ServiceGrid.tsx b/src/components/services/ServiceGrid.tsx
@@ -20,7 +20,7 @@ import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
-  rectSortingStrategy,
+  verticalListSortingStrategy,
   useSortable,
 } from "@dnd-kit/sortable";
 
@@ -63,7 +63,7 @@ const DraggableServiceCard = ({
     : undefined;
 
   return (
-    <div ref={setNodeRef} style={style} className="mb-6 break-inside-avoid">
+    <div ref={setNodeRef} style={style} className="mb-4 break-inside-avoid">
       <ServiceCard
         service={service}
         onRemove={onRemove}
@@ -206,10 +206,10 @@ export const ServiceGrid = ({
         >
           <SortableContext
             items={items.map((item) => item.instanceId)}
-            strategy={rectSortingStrategy}
+            strategy={verticalListSortingStrategy}
           >
             <div
-              className="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6"
+              className="columns-1 sm:columns-2 lg:columns-3 2xl:columns-4 gap-4"
               style={{ columnFill: "balance" }}
             >
               {items.map((service) => (

diff --git a/src/components/ui/StatusIndicator.tsx b/src/components/ui/StatusIndicator.tsx
@@ -26,6 +26,8 @@ interface StatusIndicatorProps {
 const WARNING_HEADERS = [
   "Queue warnings",
   "Indexers unavailable due to failures",
+  "Autobrr is running but reports unhealthy IRC connections",
+  "Autobrr is running but stats check failed",
 ];
 
 export const StatusIndicator: React.FC<StatusIndicatorProps> = ({