Fixing Css logic to correctly show rate limit banners in the correct …

…place (#6464)

[Linear issue 

](https://linear.app/sourcegraph/issue/QA-184/jetbrains-go-pro-label-doesnt-apply-in-each-tab-for-rate-limit)

<img width="675" alt="image"
src="https://github.com/user-attachments/assets/5a4f33c8-3b98-451e-84c4-6ca37765ba66"
/>

Currently the UI for displaying the rate limit being exceeded is bad
because it shows up in the wrong place. While I am not "stopping" the
user from clicking on new chat I think showing the go pro banner at the
right place and then making every chat error out is a good enough
mechanism to remind people to go pro.

Positioning Fixes:
1. Added relative positioning to the error banner
2. Correctly aligned the banner to appear in the right place for both VS
Code and JetBrains interfaces

Styling Improvements:
1. Added consistent margins (12px vertical, 0px horizontal) to align
with chat messages
2. Added subtle rounded corners and shadow for better visual hierarchy

Improved spacing and typography
1. Added right margin to paragraph text to prevent overlap with "Cody
Pro" banner
2. Tightened spacing between heading, paragraph, and button

Visual Refinements:
1. Improved error card styling for better visual hierarchy
2. Ensured the banner appears properly positioned relative to the
upgrade notice
3. Fixed alignment issues with the chat interface

So here's what the new banners will look like after the PR

![image](https://github.com/user-attachments/assets/ef382f92-6c8a-4018-9766-3273e4fbc0cd)


## Test plan

You can test this by going to
[rate-limit-ui-fix-testing](https://github.com/sourcegraph/cody/tree/rate-limit-ui-fix-testing)
branch and then running it in the vscode debugger and use a non-pro
account with the dotcom instance and you will ALWAYS see the banner

<!-- Required. See
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles.
-->

## Changelog

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

vscode/webviews/chat/ErrorItem.module.css

@@ -1,7 +1,13 @@
 .error-item {
     display: flex;
     flex-direction: row;
-    gap: 0.5rem;
+    gap: 0.8rem;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    margin: 0px 0px;
+    position: relative;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .error-item .icon {
@@ -11,7 +17,8 @@
 .error-item .body {
     display: flex;
     flex-direction: column;
-    gap: 0.7rem;
+    gap: 0.2rem;
+    width: 100%;
 }
 
 .error-item vscode-button {
@@ -21,30 +28,30 @@
 .error-item h1,
 .error-item p {
     margin: 0;
+    line-height: 1.15;
 }
 
 .error-item header {
     display: flex;
     flex-direction: column;
-    gap: 0.3rem;
-    margin-right: 30px;
+    gap: 0.5rem;
+    padding-right: 20px;
+    margin-top: 0px;
 }
 
 .error-item header h1 {
-    text-transform: uppercase;
-    font-size: 11px;
-    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
 }
 
 .error-item header p {
-    max-width: 40em;
     opacity: 0.9;
+    line-height: 1.5;
 }
 
 .error-item .actions {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
+    margin-top: 10px;
 }
 
 .error-item .retry-message {
@@ -58,6 +65,7 @@
     right: 0;
     overflow: hidden;
     height: 100px;
+    z-index: 1000;
 }
 
 @property --error-item-reflection-position {
@@ -140,4 +148,4 @@
 
 .request-error-title {
     font-weight: bold;
-}
+}

vscode/webviews/chat/ErrorItem.tsx

@@ -121,20 +121,20 @@ const RateLimitErrorItem: React.FunctionComponent<{
                     )}
                 </div>
                 {error.retryMessage && <p className={styles.retryMessage}>{error.retryMessage}</p>}
-            </div>
-            {canUpgrade && (
-                <div className={styles.bannerContainer}>
-                    <div
-                        className={styles.banner}
-                        role="button"
-                        tabIndex={-1}
-                        onClick={() => onButtonClick('upgrade', 'upgrade')}
-                        onKeyDown={() => onButtonClick('upgrade', 'upgrade')}
-                    >
-                        Go Pro
+                {canUpgrade && (
+                    <div className={styles.bannerContainer}>
+                        <div
+                            className={styles.banner}
+                            role="button"
+                            tabIndex={-1}
+                            onClick={() => onButtonClick('upgrade', 'upgrade')}
+                            onKeyDown={() => onButtonClick('upgrade', 'upgrade')}
+                        >
+                            Go Pro
+                        </div>
                     </div>
-                </div>
-            )}
+                )}
+            </div>
         </div>
     )
 }