Merge pull request #2153 from mito-ds/fix/chat-history-width

mito-ai: fix dropdown width

Author: aarondr77

.cursor/commands/verify.md

@@ -42,17 +42,24 @@ After each interaction:
 
 ### 7. Rebuild and Re-test
 
-After making fixes:
-
-1. **Setup Environment**: 
-   - For frontend changes: Wait a few seconds for rebuild to complete
-   - For backend changes: Restart and relaunch the server 
-
-2. **Refresh browser**: 
-   - Take new snapshot
+After making code changes and before testing again:
+
+1. **For Frontend Changes** (TypeScript/React/CSS/JavaScript):
+   - Wait a few seconds for the build to complete (check the TypeScript terminal)
+   - **Refresh the browser** to load the updated code:
+     - Use browser navigation to reload the page, or
+     - Use browser refresh functionality
+   - Retest the feature
+
+
+2. **For Backend Changes** (Python/server code):
+   - **Shut down the Jupyter server** (stop the running JupyterLab process)
+   - **Relaunch the Jupyter server** to load the updated backend code
+   - Navigate to the JupyterLab URL again
+   - Wait 3-5 seconds for full page load
+   - Take a new snapshot
    - Re-test the feature
-   - Verify fix worked
 
 ### 8. Iterate Until Complete
 
-Repeat steps 4-7 until the feature works correctly.
+Repeat steps 4-7 until the feature works correctly. 

mito-ai/style/DropdownMenu.css

@@ -18,10 +18,9 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  min-width: 200px;
+  min-width: 225px;
   white-space: nowrap;
   height: 400px;
-  min-width: 225px;
   max-width: 350px;
   overflow-y: auto;
 }
@@ -38,6 +37,22 @@
   left: auto;
 }
 
+/* Responsive width based on chat taskpane container width */
+/* Make dropdown width relative to container width, accounting for padding */
+/* At minimum taskpane width (350px), dropdown should fit within available space (330px accounting for 20px padding) */
+@container (max-width: 350px) {
+  .dropdown-menu {
+    max-width: calc(100cqw - 20px);
+  }
+}
+
+/* For wider taskpanes, allow dropdown to use up to 350px but still respect container width */
+@container (min-width: 351px) {
+  .dropdown-menu {
+    max-width: min(350px, calc(100cqw - 20px));
+  }
+}
+
 .dropdown-item-row {
   display: flex;
   flex-direction: row;