Filters layout for Cody Web (#6382)

This PR adds responsive layout for Filters Sidebar for Cody both IDE and
web.

https://www.loom.com/share/fae20c99158748efb36f56f4857c2593

## Test plan

![CleanShot 2024-12-17 at 22 05
05@2x](https://github.com/user-attachments/assets/91993f33-b920-4eff-b4ba-e1e7cea1f100)

## Changelog

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->

vscode/src/chat/chat-view/ChatController.ts

@@ -1342,7 +1342,6 @@ export class ChatController implements vscode.Disposable, vscode.WebviewViewProv
             ...assistantMessage,
             search: {
                 ...assistantMessage.search,
-                response: undefined,
                 selectedFilters,
             },
             text: undefined,

vscode/webviews/App.module.css

@@ -1,41 +1,43 @@
 .outer-container {
-    background-color: var(--vscode-sideBar-background);
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    height: 100%;
-    overflow: hidden;
+  background-color: var(--vscode-sideBar-background);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: hidden;
+  container-type: inline-size;
+  container-name: root-outer-container;
 }
 
 .error-container {
-    display: flex;
-    flex-direction: column-reverse;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
 }
 
 .error {
-    flex-direction: row;
-    display: flex;
-    padding: 1rem;
-    color: var(--vscode-input-foreground);
-    background-color: var(--vscode-inputValidation-errorBackground);
-    min-height: 2rem;
-    position: relative;
-    overflow: auto;
-    align-items: baseline;
+  flex-direction: row;
+  display: flex;
+  padding: 1rem;
+  color: var(--vscode-input-foreground);
+  background-color: var(--vscode-inputValidation-errorBackground);
+  min-height: 2rem;
+  position: relative;
+  overflow: auto;
+  align-items: baseline;
 }
 
 .close-btn {
-    position: absolute;
-    top: 0.65rem;
-    right: 0.65rem;
-    background: none;
-    border: none;
-    color: var(--vscode-input-foreground);
-    cursor: pointer;
+  position: absolute;
+  top: 0.65rem;
+  right: 0.65rem;
+  background: none;
+  border: none;
+  color: var(--vscode-input-foreground);
+  cursor: pointer;
 }
 
 /* Undo the UA stylesheet set by vscode */
 kbd {
-    all: unset;
+  all: unset;
 }

vscode/webviews/chat/cells/messageCell/assistant/SearchResults.module.css

@@ -0,0 +1,35 @@
+.results-container {
+    max-width: calc(100% - 266px);
+
+    &.filters-sidebar-hidden {
+        max-width: 100%;
+    }
+}
+@container root-outer-container (max-width: 899px) {
+    .filters-sidebar,
+    .filters-sidebar-toggle {
+        display: none !important;
+    }
+
+    .container {
+        display: block !important;
+    }
+
+    .results-container {
+        max-width: 100% !important;
+    }
+}
+
+@container root-outer-container (min-width: 900px) {
+    .filters-modal-trigger {
+        display: none !important;
+    }
+}
+
+.filters-sidebar && .results-container {
+    transition: all 1s ease-in;
+}
+
+.filters-sidebar {
+    background-color: var(--vscode-input-background);
+}