fix(ui): Improve responsiveness and content overflow in webview UI

*   Add  to various UI panels for better responsiveness.
*   Enable horizontal scrolling for code blocks, tables, and chat content.
*   Adjust code block styling to improve width handling.

Author: olasunkanmi.raymond

webviewUi/src/components/MessageRenderer.css

@@ -74,8 +74,6 @@
   color: var(--vscode-editor-foreground, #bb9af7);
   display: block;
   white-space: pre;
-  max-width: none !important;
-  width: max-content;
 }
 
 .doc-content strong {
@@ -169,7 +167,7 @@ code {
 
 pre {
   overflow-x: auto !important;
-  max-width: calc(100vw - 60px) !important;
+  max-width: 100% !important;
   white-space: pre;
   box-sizing: border-box;
 }

webviewUi/src/components/browser/BrowserPanel.tsx

@@ -88,6 +88,7 @@ const PanelOverlay = styled.div<{ isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 420px;
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/cost/CostDashboardPanel.tsx

@@ -44,6 +44,7 @@ const PanelOverlay = styled.div<{ $isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 420px;
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/coworker/CoWorkerPanel.tsx

@@ -39,6 +39,7 @@ const PanelOverlay = styled.div<{ $isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 420px;
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/notifications/NotificationPanel.tsx

@@ -28,6 +28,7 @@ const PanelOverlay = styled.div<{ isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 350px;
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/sessions/SessionsPanel.tsx

@@ -50,6 +50,7 @@ const Panel = styled.div<{ $isOpen: boolean }>`
   display: flex;
   flex-direction: column;
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
+  max-width: 100%;
 `;
 
 const Header = styled.div`

webviewUi/src/components/team/TeamPanel.tsx

@@ -31,6 +31,7 @@ const PanelOverlay = styled.div<{ $isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 460px;
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/terminal/TerminalViewerPanel.tsx

@@ -33,6 +33,7 @@ const PanelOverlay = styled.div<{ $isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 520px;
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/updates/UpdatesPanel.tsx

@@ -39,6 +39,7 @@ const PanelOverlay = styled.div<{ isOpen: boolean }>`
 
 const PanelContainer = styled.div`
   width: 450px; /* Slightly wider than notifications for news readability */
+  max-width: 100%;
   height: 100%;
   background: var(--vscode-editor-background);
   border-left: 1px solid var(--vscode-widget-border);

webviewUi/src/components/webview.css

@@ -79,7 +79,7 @@
 }
 
 .chat-content {
-  overflow: visible;
+  overflow-x: auto;
   padding-bottom: 20px;
   max-width: 100%;
   width: 100%;