diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css index 19a37d50..2178a132 100644 --- a/web/app/src/assets/base.css +++ b/web/app/src/assets/base.css @@ -101,6 +101,14 @@ body { background-color: var(--color-background-column); border-radius: var(--border-radius); padding: var(--spacer-sm); + + /* These two are necessary for the automatic resizing of the tasks table: */ + /* Ensures that the table cannot push down the bottom of the column element, + * and thus the column height is a stable reference. */ + overflow-y: auto; + /* Ensures the offsetParent of the table is the column itself; without this, + * offsetParent would be . */ + position: relative; } .col-1 { diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue index b2d7cc88..778d5a4b 100644 --- a/web/app/src/components/JobDetails.vue +++ b/web/app/src/components/JobDetails.vue @@ -59,6 +59,9 @@ export default { props: [ "jobData", // Job data to show. ], + emits: [ + "reshuffled", // Emitted when the size of this component may have changed. Used to resize other components in response. + ], data() { return { datetime: datetime, // So that the template can access it. @@ -105,13 +108,13 @@ export default { methods: { _refreshJobSettings(newJobData) { if (objectEmpty(newJobData)) { - this.simpleSettings = null; + this._clearJobSettings(); return; } // Only fetch the job type if it's different from what's already loaded. if (objectEmpty(this.jobType) || this.jobType.name != newJobData.type) { - this.simpleSettings = null; // They should only be shown when the type info is known. + this._clearJobSettings(); // They should only be shown when the type info is known. this.jobsApi.getJobType(newJobData.type) .then(this.onJobTypeLoaded) @@ -136,14 +139,20 @@ export default { } }, + _clearJobSettings() { + this.simpleSettings = null; + this.$emit('reshuffled'); + }, + _setJobSettings(newJobSettings) { if (objectEmpty(newJobSettings)) { - this.simpleSettings = null; + this._clearJobSettings(); return; } if (objectEmpty(this.jobTypeSettings)) { console.warn("empty job type settings"); + this._clearJobSettings(); return; } @@ -167,6 +176,7 @@ export default { } this.simpleSettings = filtered; + this.$emit('reshuffled'); } } }; diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue index 334cc784..ac5e75c5 100644 --- a/web/app/src/components/TasksTable.vue +++ b/web/app/src/components/TasksTable.vue @@ -5,11 +5,12 @@ :activeStatuses="shownStatuses" @click="toggleStatusFilter" /> -
+
+ diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue index 5dfc4665..8f2d30e2 100644 --- a/web/app/src/views/JobsView.vue +++ b/web/app/src/views/JobsView.vue @@ -2,8 +2,8 @@
-
- +
+
@@ -226,6 +226,12 @@ export default { }, onSIODisconnected(reason) { }, + + _recalcTasksTableHeight() { + if (!this.$refs.tasksTable) return; + // Any recalculation should be done after the DOM has updated. + this.$nextTick(this.$refs.tasksTable.recalcTableHeight); + }, }, }