colkeys menu width conforms to column with

1 files changed, 2 insertions, 11 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ee693078f..a3bc537d2 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -154,7 +154,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
 
         const totalWidth = widths.reduce((sum, width) => sum + width, 0);
-        // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately
         if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
             return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth));
         }
@@ -1133,15 +1132,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get renderColumnMenu() {
         const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
-            <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
-                {this.keysDropdown}
-            </div>
-        );
-    }
-
-    get renderKeysMenu() {
-        return (
-            <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
+            <div className="schema-column-menu" style={{ left: x,  maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px` }}>
                 {this.keysDropdown}
             </div>
         );
@@ -1184,7 +1175,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get renderFilterMenu() {
         const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
-            <div className="schema-filter-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
+            <div className="schema-filter-menu" style={{ left: x, maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px`}}>
                 <input className="schema-filter-input" type="text" value={this._filterSearchValue} onKeyDown={this.onFilterKeyDown} onChange={this.updateFilterSearch} onPointerDown={e => e.stopPropagation()} />
                 {this.renderFilterOptions}
                 <div