feat(app): visual improvements (anomalyco#35134)

Author: arvsrn

packages/app/src/index.css

@@ -224,7 +224,8 @@
 
   [data-slot="model-selector-scroll"]::before {
     top: 0;
-    background: linear-gradient(to bottom, var(--v2-background-bg-layer-01), transparent);
+    height: 12px;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--v2-background-bg-layer-01) 80%, transparent) 0%, color-mix(in srgb, var(--v2-background-bg-layer-01) 78.3336%, transparent) 4.7%, color-mix(in srgb, var(--v2-background-bg-layer-01) 76.4824%, transparent) 8.9%, color-mix(in srgb, var(--v2-background-bg-layer-01) 74.368%, transparent) 12.8%, color-mix(in srgb, var(--v2-background-bg-layer-01) 71.9123%, transparent) 16.56%, color-mix(in srgb, var(--v2-background-bg-layer-01) 69.037%, transparent) 20.37%, color-mix(in srgb, var(--v2-background-bg-layer-01) 65.664%, transparent) 24.4%, color-mix(in srgb, var(--v2-background-bg-layer-01) 61.715%, transparent) 28.83%, color-mix(in srgb, var(--v2-background-bg-layer-01) 57.1117%, transparent) 33.84%, color-mix(in srgb, var(--v2-background-bg-layer-01) 51.776%, transparent) 39.6%, color-mix(in srgb, var(--v2-background-bg-layer-01) 45.6296%, transparent) 46.3%, color-mix(in srgb, var(--v2-background-bg-layer-01) 38.5944%, transparent) 54.1%, color-mix(in srgb, var(--v2-background-bg-layer-01) 30.592%, transparent) 63.2%, color-mix(in srgb, var(--v2-background-bg-layer-01) 21.5443%, transparent) 73.76%, color-mix(in srgb, var(--v2-background-bg-layer-01) 11.373%, transparent) 85.97%, color-mix(in srgb, var(--v2-background-bg-layer-01) 0%, transparent) 100%);
   }
 
   [data-slot="manage-models-scroll"]::before {
@@ -239,7 +240,8 @@
 
   [data-slot="model-selector-scroll"]::after {
     bottom: 0;
-    background: linear-gradient(to top, var(--v2-background-bg-layer-01), transparent);
+    height: 12px;
+    background: linear-gradient(0deg, color-mix(in srgb, var(--v2-background-bg-layer-01) 80%, transparent) 0%, color-mix(in srgb, var(--v2-background-bg-layer-01) 78.3336%, transparent) 4.7%, color-mix(in srgb, var(--v2-background-bg-layer-01) 76.4824%, transparent) 8.9%, color-mix(in srgb, var(--v2-background-bg-layer-01) 74.368%, transparent) 12.8%, color-mix(in srgb, var(--v2-background-bg-layer-01) 71.9123%, transparent) 16.56%, color-mix(in srgb, var(--v2-background-bg-layer-01) 69.037%, transparent) 20.37%, color-mix(in srgb, var(--v2-background-bg-layer-01) 65.664%, transparent) 24.4%, color-mix(in srgb, var(--v2-background-bg-layer-01) 61.715%, transparent) 28.83%, color-mix(in srgb, var(--v2-background-bg-layer-01) 57.1117%, transparent) 33.84%, color-mix(in srgb, var(--v2-background-bg-layer-01) 51.776%, transparent) 39.6%, color-mix(in srgb, var(--v2-background-bg-layer-01) 45.6296%, transparent) 46.3%, color-mix(in srgb, var(--v2-background-bg-layer-01) 38.5944%, transparent) 54.1%, color-mix(in srgb, var(--v2-background-bg-layer-01) 30.592%, transparent) 63.2%, color-mix(in srgb, var(--v2-background-bg-layer-01) 21.5443%, transparent) 73.76%, color-mix(in srgb, var(--v2-background-bg-layer-01) 11.373%, transparent) 85.97%, color-mix(in srgb, var(--v2-background-bg-layer-01) 0%, transparent) 100%);
   }
 
   @supports (animation-timeline: --home-projects-scroll) and (timeline-scope: --home-projects-scroll) {

packages/app/src/pages/home.tsx

@@ -1278,7 +1278,7 @@ function HomeSessionSearch(props: {
             </div>
           </div>
         </Show>
-        <label class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] bg-v2-background-bg-layer-02/60 py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02">
+        <label class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] bg-v2-background-bg-layer-02/60 py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02 focus-within:bg-v2-background-bg-layer-02">
           <IconV2 name="magnifying-glass" />
           <input
             ref={input}