diff --git a/package-lock.json b/package-lock.json index 343fee0df..8922d7975 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16705,20 +16705,6 @@ "node": ">=18" } }, - "node_modules/filing-cabinet/node_modules/typescript": { - "version": "5.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", - "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "dev": true, - "license": "Apache-2.0", - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss index fdcc8a328..259d124f6 100644 --- a/src/dashboard/Data/Browser/Browser.scss +++ b/src/dashboard/Data/Browser/Browser.scss @@ -13,7 +13,8 @@ left: 300px; right: 0; bottom: 36px; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; } body:global(.expanded) { @@ -284,3 +285,10 @@ body:global(.expanded) { .confirmConfig { padding: 10px 20px;} + +.browserContent { + position: relative; + min-height: 100%; + overflow-x: auto; + overflow-y: hidden; +} diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js index 80ec614b7..c333a57cd 100644 --- a/src/dashboard/Data/Browser/BrowserTable.react.js +++ b/src/dashboard/Data/Browser/BrowserTable.react.js @@ -33,6 +33,7 @@ export default class BrowserTable extends React.Component { maxWidth: window.innerWidth - 300, }; this.tableRef = React.createRef(); + this.browserRef = React.createRef(); this.handleResize = this.handleResize.bind(this); this.updateMaxWidth = this.updateMaxWidth.bind(this); } @@ -42,16 +43,24 @@ export default class BrowserTable extends React.Component { this.setState({ offset: 0, }); - this.tableRef.current.scrollTop = 0; + if (this.browserRef.current) { + this.browserRef.current.scrollTop = 0; + } } else if (this.props.newObject !== props.newObject) { this.setState({ offset: 0 }); - this.tableRef.current.scrollTop = 0; + if (this.browserRef.current) { + this.browserRef.current.scrollTop = 0; + } } else if (this.props.ordering !== props.ordering) { this.setState({ offset: 0 }); - this.tableRef.current.scrollTop = 0; + if (this.browserRef.current) { + this.browserRef.current.scrollTop = 0; + } } else if (this.props.filters.size !== props.filters.size) { this.setState({ offset: 0 }, () => { - this.tableRef.current.scrollTop = 0; + if (this.browserRef.current) { + this.browserRef.current.scrollTop = 0; + } }); } } @@ -599,52 +608,55 @@ export default class BrowserTable extends React.Component {
- 0 && - (!!this.props.selection['*'] || - Object.values(this.props.selection).filter(checked => checked).length === - this.props.data.length) - } - indeterminate={ - !!this.props.selection && - !!this.props.data && - this.props.data.length > 0 && - !this.props.selection['*'] && - Object.values(this.props.selection).filter(checked => checked).length > 0 && - Object.values(this.props.selection).filter(checked => checked).length !== - this.props.data.length - } - selectAll={checked => - this.props.data.forEach(({ id }) => this.props.selectRow(id, checked)) - } - headers={headers} - stickyLefts={stickyLefts} - freezeIndex={this.props.freezeIndex} - freezeColumns={this.props.freezeColumns} - unfreezeColumns={this.props.unfreezeColumns} - updateOrdering={this.props.updateOrdering} - showRowNumber={this.props.showRowNumber} - setShowRowNumber={this.props.setShowRowNumber} - rowNumberWidth={rowNumberWidth} - readonly={!!this.props.relation || !!this.props.isUnique} - handleDragDrop={this.props.handleHeaderDragDrop} - onResize={this.props.handleResize} - onAddColumn={this.props.onAddColumn} - preventSchemaEdits={this.context.preventSchemaEdits} - isDataLoaded={!!this.props.data} - setSelectedObjectId={this.props.setSelectedObjectId} - setCurrent={this.props.setCurrent} - setContextMenu={this.props.setContextMenu} - /> - {table} +
+ 0 && + (!!this.props.selection['*'] || + Object.values(this.props.selection).filter(checked => checked).length === + this.props.data.length) + } + indeterminate={ + !!this.props.selection && + !!this.props.data && + this.props.data.length > 0 && + !this.props.selection['*'] && + Object.values(this.props.selection).filter(checked => checked).length > 0 && + Object.values(this.props.selection).filter(checked => checked).length !== + this.props.data.length + } + selectAll={checked => + this.props.data.forEach(({ id }) => this.props.selectRow(id, checked)) + } + headers={headers} + stickyLefts={stickyLefts} + freezeIndex={this.props.freezeIndex} + freezeColumns={this.props.freezeColumns} + unfreezeColumns={this.props.unfreezeColumns} + updateOrdering={this.props.updateOrdering} + showRowNumber={this.props.showRowNumber} + setShowRowNumber={this.props.setShowRowNumber} + rowNumberWidth={rowNumberWidth} + readonly={!!this.props.relation || !!this.props.isUnique} + handleDragDrop={this.props.handleHeaderDragDrop} + onResize={this.props.handleResize} + onAddColumn={this.props.onAddColumn} + preventSchemaEdits={this.context.preventSchemaEdits} + isDataLoaded={!!this.props.data} + setSelectedObjectId={this.props.setSelectedObjectId} + setCurrent={this.props.setCurrent} + setContextMenu={this.props.setContextMenu} + /> + {table} +
); }