colkeys menu width conforms to column with

2 files changed, 3 insertions, 19 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 425b67fa9..e3f3dafab 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -51,8 +51,6 @@
 .schema-filter-menu {
     background: $light-gray;
     position: absolute;
-    min-width: 150px;
-    max-width: 300px;
     max-height: 300px;
     display: flex;
     overflow: hidden;
@@ -60,11 +58,6 @@
     align-items: flex-start;
     z-index: 5;
 
-    .schema-key-search-input {
-        width: calc(100% - 20px);
-        margin: 10px;
-    }
-
     .schema-search-result {
         cursor: pointer;
         padding: 5px 10px;
@@ -106,7 +99,7 @@
 
     .schema-key-list {
         width: 100%;
-        max-height: 300px;
+        max-height: 250px;
         overflow-y: auto;
     }
 
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