2 files changed, 14 insertions, 10 deletions
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index fc6a7bd281..6b16ff9efb 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -6,7 +6,7 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
-type CommitStatus = 'pending' | 'success' | 'error' | 'failure' | 'warning';
+type CommitStatus = 'pending' | 'success' | 'error' | 'failure' | 'warning' | 'skipped';
 
 type CommitStatusMap = {
   [status in CommitStatus]: {
@@ -22,6 +22,7 @@ const commitStatus: CommitStatusMap = {
   error: {name: 'gitea-exclamation', color: 'red'},
   failure: {name: 'octicon-x', color: 'red'},
   warning: {name: 'gitea-exclamation', color: 'yellow'},
+  skipped: {name: 'octicon-skip', color: 'grey'},
 };
 
 export default defineComponent({
@@ -218,7 +219,9 @@ export default defineComponent({
       this.searchRepos();
     },
 
-    changePage(page: number) {
+    async changePage(page: number) {
+      if (this.isLoading) return;
+
       this.page = page;
       if (this.page > this.finalPage) {
         this.page = this.finalPage;
@@ -228,7 +231,7 @@ export default defineComponent({
       }
       this.repos = [];
       this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
-      this.searchRepos();
+      await this.searchRepos();
     },
 
     async searchRepos() {
@@ -298,7 +301,7 @@ export default defineComponent({
       return commitStatus[status].color;
     },
 
-    reposFilterKeyControl(e: KeyboardEvent) {
+    async reposFilterKeyControl(e: KeyboardEvent) {
       switch (e.key) {
         case 'Enter':
           document.querySelector<HTMLAnchorElement>('.repo-owner-name-list li.active a')?.click();
@@ -307,7 +310,7 @@ export default defineComponent({
           if (this.activeIndex > 0) {
             this.activeIndex--;
           } else if (this.page > 1) {
-            this.changePage(this.page - 1);
+            await this.changePage(this.page - 1);
             this.activeIndex = this.searchLimit - 1;
           }
           break;
@@ -316,17 +319,17 @@ export default defineComponent({
             this.activeIndex++;
           } else if (this.page < this.finalPage) {
             this.activeIndex = 0;
-            this.changePage(this.page + 1);
+            await this.changePage(this.page + 1);
           }
           break;
         case 'ArrowRight':
           if (this.page < this.finalPage) {
-            this.changePage(this.page + 1);
+            await this.changePage(this.page + 1);
           }
           break;
         case 'ArrowLeft':
           if (this.page > 1) {
-            this.changePage(this.page - 1);
+            await this.changePage(this.page - 1);
           }
           break;
       }
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index af300622b4..2eb2211269 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -177,7 +177,7 @@ export default defineComponent({
     },
   },
 
-  async mounted() { // eslint-disable-line @typescript-eslint/no-misused-promises
+  async mounted() {
     // load job data and then auto-reload periodically
     // need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener
     await this.loadJob();
@@ -439,7 +439,8 @@ export default defineComponent({
 });
 </script>
 <template>
-  <div class="ui container action-view-container">
+  <!-- make the view container full width to make users easier to read logs -->
+  <div class="ui fluid container">
     <div class="action-view-header">
       <div class="action-info-summary">
         <div class="action-info-summary-title">