category search, ux changes for pinned parts, other tweaks

.next/static/css/app/layout.css

@@ -513,8 +513,11 @@ video {
 .relative {
   position: relative;
 }
-.inset-0 {
-  inset: 0px;
+.right-1 {
+  right: 0.25rem;
+}
+.top-1\/2 {
+  top: 50%;
 }
 .mx-1 {
   margin-left: 0.25rem;
@@ -623,6 +626,10 @@ video {
 .flex-1 {
   flex: 1 1 0%;
 }
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -724,6 +731,10 @@ video {
 .border-red-500\/30 {
   border-color: rgb(239 68 68 / 0.3);
 }
+.border-zinc-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(82 82 91 / var(--tw-border-opacity));
+}
 .border-zinc-700 {
   --tw-border-opacity: 1;
   border-color: rgb(63 63 70 / var(--tw-border-opacity));
@@ -732,10 +743,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(39 39 42 / var(--tw-border-opacity));
 }
-.border-zinc-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(82 82 91 / var(--tw-border-opacity));
-}
 .bg-amber-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -779,6 +786,9 @@ video {
 .bg-zinc-900\/60 {
   background-color: rgb(24 24 27 / 0.6);
 }
+.bg-zinc-900\/70 {
+  background-color: rgb(24 24 27 / 0.7);
+}
 .bg-zinc-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(9 9 11 / var(--tw-bg-opacity));
@@ -792,9 +802,6 @@ video {
 .bg-zinc-950\/80 {
   background-color: rgb(9 9 11 / 0.8);
 }
-.bg-zinc-900\/70 {
-  background-color: rgb(24 24 27 / 0.7);
-}
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -819,6 +826,10 @@ video {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -871,21 +882,20 @@ video {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 .pr-1 {
   padding-right: 0.25rem;
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pt-3 {
   padding-top: 0.75rem;
 }
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-.pr-2 {
-  padding-right: 0.5rem;
+.pr-6 {
+  padding-right: 1.5rem;
 }
 .text-left {
   text-align: left;
@@ -941,6 +951,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.leading-none {
+  line-height: 1;
+}
 .tracking-\[0\.15em\] {
   letter-spacing: 0.15em;
 }
@@ -976,6 +989,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
+.text-zinc-100 {
+  --tw-text-opacity: 1;
+  color: rgb(244 244 245 / var(--tw-text-opacity));
+}
 .text-zinc-200 {
   --tw-text-opacity: 1;
   color: rgb(228 228 231 / var(--tw-text-opacity));
@@ -1000,25 +1017,23 @@ video {
   --tw-text-opacity: 1;
   color: rgb(82 82 91 / var(--tw-text-opacity));
 }
-.text-zinc-100 {
-  --tw-text-opacity: 1;
-  color: rgb(244 244 245 / var(--tw-text-opacity));
-}
 .underline {
   text-decoration-line: underline;
 }
 .line-through {
   text-decoration-line: line-through;
 }
-.opacity-0 {
-  opacity: 0;
-}
 .opacity-40 {
   opacity: 0.4;
 }
 .opacity-60 {
   opacity: 0.6;
 }
+.shadow-\[0_0_0_1px_rgba\(251\2c 191\2c 36\2c 0\.25\)\] {
+  --tw-shadow: 0 0 0 1px rgba(251,191,36,0.25);
+  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1037,11 +1052,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1116,10 +1126,6 @@ body {
   --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity));
 }
 
-.group:hover .group-hover\:opacity-100 {
-  opacity: 1;
-}
-
 @media (min-width: 640px) {
 
   .sm\:flex-row {