refactor(web): simplify models page header

apps/web/src/styles/pages.css

@@ -79,9 +79,17 @@
   gap: 14px;
 }
 
-.modelSearchBar {
+.modelsToolbar {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: 16px;
+}
+
+.modelsToolbar p {
+  margin-right: auto;
+  color: var(--text-soft);
+  font-size: var(--font-size-base);
 }
 
 .searchField {
@@ -95,6 +103,10 @@
   color: var(--muted-foreground);
 }
 
+.searchField.modelHeaderSearch {
+  width: min(520px, 42vw);
+}
+
 .searchField svg {
   margin-left: 12px;
 }
@@ -105,27 +117,6 @@
   box-shadow: none;
 }
 
-.providerHero {
-  display: flex;
-  min-height: 86px;
-  align-items: center;
-  gap: 14px;
-  padding: 18px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: #fff;
-}
-
-.providerHero strong {
-  display: block;
-  font-size: 18px;
-}
-
-.providerHero span {
-  color: var(--muted-foreground);
-  font-size: 13px;
-}
-
 .providerLogo,
 .modelIcon {
   display: grid;
@@ -149,10 +140,6 @@
   object-fit: contain;
 }
 
-.providerHero .shBadge {
-  margin-left: auto;
-}
-
 .modelCards {
   display: grid;
   grid-template-columns: repeat(3, minmax(260px, 1fr));
@@ -1423,6 +1410,15 @@
     flex-direction: column;
   }
 
+  .modelsToolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .searchField.modelHeaderSearch {
+    width: 100%;
+  }
+
   .providerCatalogActions {
     grid-column: 1 / -1;
     justify-content: flex-start;