fix(model-catalog): refine summary capability filters

apps/web/src/styles/pages.css

@@ -26,8 +26,8 @@
 
 .modelsPage {
   display: grid;
-  grid-template-columns: 246px minmax(0, 1fr);
-  gap: 22px;
+  grid-template-columns: 282px minmax(0, 1fr);
+  gap: 18px;
   align-items: start;
 }
 
@@ -35,10 +35,38 @@
   position: sticky;
   top: 88px;
   display: grid;
+  max-height: calc(100vh - 104px);
   gap: 22px;
   padding-left: 14px;
   padding-right: 18px;
+  padding-bottom: 8px;
   border-right: 1px solid var(--border);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.modelFilters:hover {
+  scrollbar-color: rgba(113, 113, 122, 0.36) transparent;
+}
+
+.modelFilters::-webkit-scrollbar {
+  width: 4px;
+}
+
+.modelFilters::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modelFilters::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: transparent;
+}
+
+.modelFilters:hover::-webkit-scrollbar-thumb {
+  background: rgba(113, 113, 122, 0.32);
 }
 
 .filterGroup {
@@ -124,33 +152,53 @@
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
+  min-height: 36px;
 }
 
 .searchField {
   display: grid;
-  width: min(420px, 100%);
-  grid-template-columns: 34px minmax(0, 1fr);
+  width: min(360px, 100%);
+  min-height: 36px;
+  grid-template-columns: 36px minmax(0, 1fr);
   align-items: center;
   border: 1px solid var(--border);
   border-radius: 999px;
-  background: #fff;
+  background: var(--surface);
   color: var(--muted-foreground);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
 }
 
 .searchField.modelHeaderSearch {
-  width: min(520px, 42vw);
+  width: min(360px, 34vw);
+}
+
+.searchField:hover,
+.searchField:focus-within {
+  border-color: var(--ring);
+  color: var(--text-normal);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 24%, transparent);
 }
 
 .searchField svg {
-  margin-left: 12px;
+  margin-left: 13px;
+  transition: color 0.16s ease;
 }
 
 .searchField .shInput {
+  min-height: 34px;
+  padding-left: 0;
+  padding-right: 12px;
   border: 0;
   border-radius: 999px;
+  background: transparent;
   box-shadow: none;
 }
 
+.searchField .shInput::placeholder {
+  color: var(--text-faint);
+}
+
 .providerLogo,
 .modelIcon {
   display: grid;
@@ -177,7 +225,7 @@
 .modelCards {
   display: grid;
   grid-template-columns: repeat(3, minmax(260px, 1fr));
-  gap: 10px;
+  gap: 8px;
 }
 
 .modelCard .shCardContent {
@@ -2123,9 +2171,12 @@
   }
 
   .modelFilters {
+    max-height: none;
     padding-left: 0;
     padding-right: 0;
     border-right: 0;
+    overflow: visible;
+    scrollbar-width: auto;
   }
 
   .modelCards,