fix: complete catalog pagination and recovery states

app/static/admin.css

@@ -61,8 +61,8 @@
   text-underline-offset: 4px;
 }
 
-:is(a, button, input, select):focus-visible {
-  outline: 3px solid #14b8a6;
+:is(a, button, input, select, summary):focus-visible {
+  outline: 3px solid #0f766e;
   outline-offset: 2px;
 }
 
@@ -133,10 +133,6 @@
   border-collapse: collapse;
 }
 
-.table__row {
-  cursor: pointer;
-}
-
 .table__row:hover {
   background: #f0fdfa;
 }
@@ -205,6 +201,19 @@
 
 .button--compact {
   padding: 8px 12px;
+}
+
+.button:hover {
+  filter: brightness(0.9);
+}
+
+.button:active {
+  filter: brightness(0.8);
+}
+
+.button:disabled {
+  cursor: wait;
+  opacity: 0.65;
 }
 
 .code {
@@ -537,7 +546,7 @@
 
 .directory__filters {
   display: grid;
-  grid-template-columns: 1.1fr 2fr 1.25fr 2fr;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px;
   padding: 16px;
   background: #ffffff;
@@ -547,7 +556,7 @@
 
 .directory__filter-group {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  grid-template-columns: 1fr;
   align-content: start;
   gap: 8px;
   min-width: 0;
@@ -578,6 +587,9 @@
 }
 
 .directory__input {
+  font: inherit;
+  font-size: 16px;
+  font-weight: 400;
   min-width: 0;
   padding: 10px 12px;
   border: 1px solid #cbd5e1;
@@ -611,9 +623,18 @@
   font-weight: 700;
 }
 
+.directory__help {
+  color: #4b5563;
+  line-height: 1.5;
+}
+
+.directory__help summary {
+  cursor: pointer;
+}
+
 .directory-table {
   width: 100%;
-  min-width: 960px;
+  min-width: 640px;
   border-collapse: collapse;
 }
 
@@ -628,10 +649,15 @@
 }
 
 .directory-table__cell {
+  overflow-wrap: anywhere;
   max-width: 280px;
   padding: 12px 10px;
   border-bottom: 1px solid #e5e7eb;
   vertical-align: top;
+}
+
+.directory-table .badge {
+  white-space: nowrap;
 }
 
 .directory-table__row {
@@ -751,6 +777,14 @@
 }
 
 @media (max-width: 620px) {
+  .directory-table [data-column="full_name"] {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    min-width: 130px;
+    max-width: 160px;
+    background: #ffffff;
+  }
   .admin__header {
     align-items: flex-start;
     padding: 16px;
@@ -780,11 +814,3 @@
     font-size: 13px;
   }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .progress-bar__fill {
-    transition-property: width;
-    transition-duration: 0.25s;
-    transition-timing-function: ease;
-  }
-}