fix(ui): make plugins pages responsive (#12752)

If a test mis-behave, for ex starting an execution but not terminating it, as the default termination grace period is 5mn it can take very long time to wait for post-test terminaison.
Switching to a termination grace period of 5s may help.

I also detect that the ExecutionControllerRunner test when launching the test suite, would not properly kill the `sleep-long` flow so waiting for it to complete, or the termination grace period. When a test that use this flow is launched separatly it works properly. As a safety net I reduce the sleep from 5mn to 30s.

.github/workflows/main-build.yml

@@ -28,7 +28,7 @@ jobs:
     steps:
       # Targeting develop branch from develop
       - name: Trigger EE Workflow (develop push, no payload)
-        uses: peter-evans/repository-dispatch@5fc4efd1a4797ddb68ffd0714a238564e4cc0e6f
+        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697
         if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop' }}
         with:
           token: ${{ secrets.GH_PERSONAL_TOKEN }}

.github/workflows/pull-request.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Check EE repo for branch with same name
       if: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false }}
       id: check-ee-branch
-      uses: actions/github-script@v7
+      uses: actions/github-script@v8
       with:
         github-token: ${{ secrets.GH_PERSONAL_TOKEN }}
         script: |
@@ -40,7 +40,7 @@ jobs:
 
       # Targeting pull request (only if not from a fork and EE has no branch with same name)
     - name: Trigger EE Workflow (pull request, with payload)
-      uses: peter-evans/repository-dispatch@5fc4efd1a4797ddb68ffd0714a238564e4cc0e6f
+      uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697
       if: ${{ github.event_name == 'pull_request'
         && github.event.pull_request.number != ''
         && github.event.pull_request.head.repo.fork == false
@@ -50,7 +50,7 @@ jobs:
         repository: kestra-io/kestra-ee
         event-type: "oss-updated"
         client-payload: >-
-          {"commit_sha":"${{ github.sha }}","pr_repo":"${{ github.repository }}"}
+          {"commit_sha":"${{ github.event.pull_request.head.sha }}","pr_repo":"${{ github.repository }}"}
 
   file-changes:
     if: ${{ github.event.pull_request.draft == false }}

build.gradle

@@ -7,7 +7,7 @@ buildscript {
     }
 
     dependencies {
-        classpath "net.e175.klaus:zip-prefixer:0.3.1"
+        classpath "net.e175.klaus:zip-prefixer:0.4.0"
     }
 }
 

cli/src/test/resources/application-test.yml

@@ -21,6 +21,7 @@ kestra:
   server:
     liveness:
       enabled: false
+    termination-grace-period: 5s
 micronaut:
   http:
     services:

core/src/test/resources/application-test.yml

@@ -58,7 +58,8 @@ kestra:
       purge:
         initial-delay: 1h
         fixed-delay: 1d
-        retention: 30d
+        retention: 30dPeriod
+    termination-grace-period: 5s
 
   anonymous-usage-report:
     enabled: false

core/src/test/resources/flows/valids/sleep-long.yml

@@ -4,7 +4,7 @@ namespace: io.kestra.tests
 tasks:
   - id: sleep-long
     type: io.kestra.plugin.core.flow.Sleep
-    duration: PT300S
+    duration: PT30S
 
 afterExecution:
   - id: output

executor/src/test/resources/application-test.yml

@@ -54,6 +54,7 @@ kestra:
         - "/api/v1/executions/webhook/"
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h

jdbc-h2/src/test/resources/application-test.yml

@@ -19,6 +19,7 @@ kestra:
   server:
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h

jdbc-mysql/src/test/resources/application-test.yml

@@ -25,6 +25,7 @@ kestra:
   server:
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h

jdbc-postgres/src/test/resources/application-test.yml

@@ -40,6 +40,7 @@ kestra:
   server:
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h

platform/build.gradle

@@ -17,10 +17,10 @@ dependencies {
     def mavenResolverVersion = "2.0.10"
     def jollydayVersion = "1.5.6"
     def jsonschemaVersion = "4.38.0"
-    def kafkaVersion = "4.1.0"
+    def kafkaVersion = "4.1.1"
     def opensearchVersion = "3.2.0"
     def opensearchRestVersion = "3.3.2"
-    def flyingSaucerVersion = "10.0.3"
+    def flyingSaucerVersion = "10.0.4"
     def jacksonVersion = "2.20.1"
     def jacksonAnnotationsVersion = "2.20"
     def jugVersion = "5.1.1"
@@ -31,11 +31,11 @@ dependencies {
     api enforcedPlatform("com.fasterxml.jackson:jackson-bom:$jacksonVersion")
     api enforcedPlatform("org.slf4j:slf4j-api:$slf4jVersion")
     api platform("io.micronaut.platform:micronaut-platform:4.9.4")
-    api platform("io.qameta.allure:allure-bom:2.30.0")
+    api platform("io.qameta.allure:allure-bom:2.31.0")
     // we define cloud bom here for GCP, Azure and AWS so they are aligned for all plugins that use them (secret, storage, oss and ee plugins)
-    api platform('com.google.cloud:libraries-bom:26.71.0')
+    api platform('com.google.cloud:libraries-bom:26.72.0')
     api platform("com.azure:azure-sdk-bom:1.3.2")
-    api platform('software.amazon.awssdk:bom:2.38.4')
+    api platform('software.amazon.awssdk:bom:2.38.9')
     api platform("dev.langchain4j:langchain4j-bom:$langchain4jVersion")
     api platform("dev.langchain4j:langchain4j-community-bom:$langchain4jCommunityVersion")
 
@@ -90,7 +90,7 @@ dependencies {
         api group: 'net.thisptr', name: 'jackson-jq', version: '1.6.0'
         api group: 'com.google.guava', name: 'guava', version: '33.4.8-jre'
         api group: 'commons-io', name: 'commons-io', version: '2.21.0'
-        api group: 'org.apache.commons', name: 'commons-lang3', version: '3.19.0'
+        api group: 'org.apache.commons', name: 'commons-lang3', version: '3.20.0'
         api 'ch.qos.logback.contrib:logback-json-classic:0.1.5'
         api 'ch.qos.logback.contrib:logback-jackson:0.1.5'
         api group: 'org.apache.maven.resolver', name: 'maven-resolver-impl', version: mavenResolverVersion
@@ -113,8 +113,8 @@ dependencies {
         api 'com.h2database:h2:2.4.240'
         api 'com.mysql:mysql-connector-j:9.5.0'
         api 'org.postgresql:postgresql:42.7.8'
-        api 'com.github.docker-java:docker-java:3.7.0'
-        api 'com.github.docker-java:docker-java-transport-httpclient5:3.7.0'
+        api 'com.github.docker-java:docker-java:3.6.0'
+        api 'com.github.docker-java:docker-java-transport-httpclient5:3.6.0'
         api (group: 'org.opensearch.client', name: 'opensearch-java', version: "$opensearchVersion")
         api (group: 'org.opensearch.client', name: 'opensearch-rest-client', version: "$opensearchRestVersion")
         api (group: 'org.opensearch.client', name: 'opensearch-rest-high-level-client', version: "$opensearchRestVersion") // used by the elasticsearch plugin
@@ -140,7 +140,7 @@ dependencies {
         api 'org.hamcrest:hamcrest:3.0'
         api 'org.hamcrest:hamcrest-library:3.0'
         api group: 'org.exparity', name: 'hamcrest-date', version: '2.0.8'
-        api "org.wiremock:wiremock-jetty12:3.13.1"
+        api "org.wiremock:wiremock-jetty12:3.13.2"
         api "org.apache.kafka:kafka-streams-test-utils:$kafkaVersion"
         api "com.microsoft.playwright:playwright:1.56.0"
         api "org.awaitility:awaitility:4.3.0"

repository-memory/src/test/resources/application-test.yml

@@ -9,4 +9,5 @@ kestra:
     poll-switch-interval: 5s
   server:
     liveness:
-      enabled: false
+      enabled: false
+    termination-grace-period: 5s

runner-memory/src/test/resources/application-test.yml

@@ -13,4 +13,5 @@ kestra:
     poll-switch-interval: 5s
   server:
     liveness:
-      enabled: false
+      enabled: false
+    termination-grace-period: 5s

scheduler/src/test/resources/application-test.yml

@@ -54,6 +54,7 @@ kestra:
         - "/api/v1/executions/webhook/"
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h

ui/package.json

@@ -38,8 +38,7 @@
         "cronstrue": "^3.9.0",
         "cytoscape": "^3.33.0",
         "dagre": "^0.8.5",
-        "el-table-infinite-scroll": "^3.0.7",
-        "element-plus": "2.11.7",
+        "element-plus": "2.11.8",
         "humanize-duration": "^3.33.1",
         "js-yaml": "^4.1.1",
         "lodash": "^4.17.21",
@@ -98,8 +97,8 @@
         "@types/testing-library__jest-dom": "^6.0.0",
         "@types/testing-library__user-event": "^4.2.0",
         "@typescript-eslint/parser": "^8.46.4",
-        "@vitejs/plugin-vue": "^6.0.1",
-        "@vitejs/plugin-vue-jsx": "^5.1.1",
+        "@vitejs/plugin-vue": "^6.0.2",
+        "@vitejs/plugin-vue-jsx": "^5.1.2",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "@vue/eslint-config-prettier": "^10.2.0",
@@ -131,26 +130,23 @@
         "uuid": "^13.0.0",
         "vite": "npm:rolldown-vite@latest",
         "vitest": "^3.2.4",
-        "vue-tsc": "^3.1.3"
+        "vue-tsc": "^3.1.4"
     },
     "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.27.0",
         "@esbuild/darwin-x64": "^0.27.0",
         "@esbuild/linux-x64": "^0.27.0",
-        "@rollup/rollup-darwin-arm64": "^4.53.2",
-        "@rollup/rollup-darwin-x64": "^4.53.2",
-        "@rollup/rollup-linux-x64-gnu": "^4.53.2",
-        "@swc/core-darwin-arm64": "^1.15.1",
-        "@swc/core-darwin-x64": "^1.15.1",
-        "@swc/core-linux-x64-gnu": "^1.15.1"
+        "@rollup/rollup-darwin-arm64": "^4.53.3",
+        "@rollup/rollup-darwin-x64": "^4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "^4.53.3",
+        "@swc/core-darwin-arm64": "^1.15.2",
+        "@swc/core-darwin-x64": "^1.15.2",
+        "@swc/core-linux-x64-gnu": "^1.15.2"
     },
     "overrides": {
         "bootstrap": {
             "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7"
         },
-        "el-table-infinite-scroll": {
-            "vue": "^3.5.21"
-        },
         "storybook": "$storybook",
         "vite": "npm:rolldown-vite@latest"
     },

ui/src/components/docs/DocsLayout.vue

@@ -1,49 +1,83 @@
 <template>
-    <div class="d-flex full-height">
-        <div v-if="$slots.menu" :style="{flex: collapsed ? '0 1 0px' : '0 0 306px'}" :class="{collapsed}" class="sidebar d-flex flex-column gap-3">
-            <!--
-            <div class="d-flex gap-2 align-items-center">
-                <el-button @click="collapsed = !collapsed">
-                    <chevron-right v-if="collapsed" />
-                    <chevron-left v-else />
-                </el-button>
-                <span class="toggle-btn text-body-tertiary">{{ $t((collapsed ? 'open' : 'close') + ' sidebar').toUpperCase() }}</span>
-            </div>
-            -->
+    <div class="d-flex full-height docs-layout-container">
+        <div 
+            v-if="mobileMenuOpen && $slots.menu" 
+            class="mobile-backdrop"
+            @click="mobileMenuOpen = false"
+        />
+        
+        <div v-if="$slots.menu" :style="{flex: collapsed ? '0 1 0px' : '0 0 306px'}" :class="[{collapsed}, {'mobile-open': mobileMenuOpen}]" class="sidebar d-flex flex-column gap-3">
+            <el-button 
+                v-if="isPluginsRoute" 
+                :class="['mobile-close-toggle']"
+                @click="mobileMenuOpen = false"
+                :icon="Close"
+                :aria-label="'Close menu'"
+                link
+            />
             <div v-if="!collapsed" class="d-flex flex-column gap-3">
                 <slot name="menu" />
             </div>
         </div>
-        <div class="container main-container">
-            <div class="content">
-                <slot name="content" />
+        <div class="main-content-wrapper">
+            <div v-if="$slots['secondary-header']" class="secondary-header">
+                <el-button 
+                    v-if="$slots.menu && isPluginsRoute" 
+                    :class="['mobile-menu-toggle']"
+                    @click="mobileMenuOpen = !mobileMenuOpen"
+                    :icon="Menu"
+                    :aria-label="'Open menu'"
+                    link
+                />
+                <slot name="secondary-header" />
+            </div>
+            <div class="main-container">
+                <div class="content">
+                    <slot name="content" />
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    import {ref, computed} from "vue"
+    import {ref, computed, watch} from "vue"
     import {useRoute} from "vue-router";
     import {useScrollMemory} from "../../composables/useScrollMemory";
+    import Menu from "vue-material-design-icons/Menu.vue";
+    import Close from "vue-material-design-icons/Close.vue";
 
     const collapsed = ref(false);
+    const mobileMenuOpen = ref(false);
     const route = useRoute();
     const scrollKey = computed(() => `docs:${route.fullPath}`);
+    
+    const isPluginsRoute = computed(() => {
+        return route.path.startsWith("/main/plugins") ||
+            (typeof route.name === "string" && route.name.startsWith("plugins/"));
+    });
 
     useScrollMemory(scrollKey, undefined, true);
 
+    watch(() => route.fullPath, () => {
+        mobileMenuOpen.value = false;
+    });
+
 </script>
 
 <style scoped lang="scss">
     @import "@kestra-io/ui-libs/src/scss/variables";
 
+    .docs-layout-container {
+        height: calc(100vh - 80px);
+        overflow: hidden;
+    }
+
     .sidebar {
         background: var(--ks-background-card);
         padding: 2rem;
-        height: calc(100vh - 80px);
-        top: 80px;
-        position: sticky;
+        height: 100%;
+        position: relative;
         overflow-y: auto;
 
         &.collapsed {
@@ -61,15 +95,42 @@
         }
     }
 
+    .main-content-wrapper {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        height: 100%;
+        overflow-y: auto;
+    }
+    
+    .secondary-header {
+        background-color: var(--ks-background-panel);
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        min-height: 64px;
+        flex-shrink: 0;
+        
+        .mobile-menu-toggle {
+            display: none;
+        }
+    }
+
     .main-container {
-        max-width: 100%;
+        flex: 1;
+        background-color: var(--ks-background-panel);
+        position: relative;
+        min-height: 0;
     }
 
     .content {
-        margin: $spacer;
+        margin: 0;
+        padding: 1rem;
+        background-color: var(--ks-background-panel);
 
         h1 {
-            margin-bottom: $spacer;
+            margin-bottom: 0.5rem;
         }
 
         #{--bs-link-color}: #8405FF;
@@ -230,4 +291,226 @@
             padding-bottom: 1px !important;
         }
     }
+
+    .mobile-menu-toggle {
+        display: none;
+    }
+    
+    .mobile-close-toggle {
+        display: none;
+    }
+
+    .mobile-backdrop {
+        display: none;
+    }
+
+    @media (max-width: 767px) {
+        .docs-layout-container {
+            height: 100vh;
+        }
+        
+        .main-content-wrapper {
+            overflow: hidden;
+        }
+        
+        .secondary-header {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            
+            .mobile-menu-toggle {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 44px;
+                height: 44px;
+                padding: 0;
+                padding-left: 1rem;
+                flex-shrink: 0;
+                transition: transform 0.2s ease;
+
+                &:hover {
+                    transform: scale(1.1);
+                }
+
+                &:active {
+                    transform: scale(0.95);
+                }
+
+                :deep(.material-design-icon) {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+        
+        .mobile-close-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            z-index: 1001;
+            width: 44px;
+            height: 44px;
+            padding: 0;
+            transition: transform 0.2s ease;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+
+            &:active {
+                transform: scale(0.95);
+            }
+
+            :deep(.material-design-icon) {
+                width: 24px;
+                height: 24px;
+            }
+        }
+
+        .mobile-backdrop {
+            display: block;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 999;
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .sidebar {
+            position: fixed;
+            left: -100%;
+            top: 0;
+            height: 100vh;
+            width: calc(100vw - 44px);
+            max-width: 100vw;
+            z-index: 1000;
+            transition: left 0.3s ease-in-out;
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+            padding: 1rem;
+            padding-top: 3.5rem;
+            padding-right: 0.5rem;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+
+            &.mobile-open {
+                left: 0;
+            }
+            
+            > div {
+                flex: 1;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        .main-container {
+            width: 100%;
+            padding: 0;
+            overflow-y: auto;
+        }
+
+        .content {
+            margin: 0;
+            padding: 0.75rem;
+            background-color: var(--ks-background-panel);
+        }
+    }
+
+    @media (min-width: 576px) and (max-width: 767px) {
+        .sidebar {
+            width: 90vw;
+            max-width: 450px;
+            top: 65px;
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        .mobile-menu-toggle {
+            display: none;
+        }
+        
+        .mobile-close-toggle {
+            display: none;
+        }
+
+        .mobile-backdrop {
+            display: none;
+        }
+
+        .sidebar {
+            display: flex !important;
+            position: sticky;
+            left: auto;
+            width: auto;
+            box-shadow: none;
+        }
+
+        .content {
+            margin: 0;
+            padding: 1rem;
+            background-color: var(--ks-background-panel);
+
+            h1 {
+                margin-bottom: 0.75rem;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .mobile-menu-toggle {
+            display: none;
+        }
+        
+        .mobile-close-toggle {
+            display: none;
+        }
+
+        .mobile-backdrop {
+            display: none;
+        }
+
+        .sidebar {
+            display: flex !important;
+            position: sticky;
+            left: auto;
+            width: auto;
+            box-shadow: none;
+        }
+
+        .content {
+            margin: 0;
+            padding: 1.25rem;
+            background-color: var(--ks-background-panel);
+
+            h1 {
+                margin-bottom: 1rem;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(xl) {
+        .content {
+            margin: 0;
+            padding: 1.5rem;
+            background-color: var(--ks-background-panel);
+
+            h1 {
+                margin-bottom: $spacer;
+            }
+        }
+    }
 </style>

ui/src/components/layout/SelectTable.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-    import {ref, onMounted, onUnmounted, onUpdated, watch, withDefaults} from "vue";
+    import {ref, onMounted, onUnmounted, onUpdated, watch} from "vue";
 
     const props = withDefaults(defineProps<{
         showSelection?: boolean;

ui/src/components/plugins/Plugin.vue

@@ -4,54 +4,55 @@
         <PluginHome v-if="filteredPlugins" :plugins="filteredPlugins" />
     </template>
     <DocsLayout v-else>
+        <template #secondary-header>
+            <div class="plugin-secondary-header">
+                <div class="d-flex align-items-center gap-3">
+                    <TaskIcon
+                        class="plugin-icon"
+                        :cls="pluginType"
+                        onlyIcon
+                        :icons="pluginsStore.icons"
+                    />
+                    <h4 class="mb-0 plugin-name">
+                        {{ pluginName }}
+                    </h4>
+                    <el-button
+                        v-if="releaseNotesUrl"
+                        size="small"
+                        class="release-notes-btn"
+                        :icon="GitHub"
+                        @click="openReleaseNotes"
+                    >
+                        {{ $t('plugins.release') }}
+                    </el-button>
+                </div>
+                <div class="versions" v-if="(pluginsStore.versions?.length ?? 0) > 0">
+                    <el-select
+                        v-model="version"
+                        placeholder="Version"
+                        size="small"
+                        :disabled="(pluginsStore.versions?.length ?? 0) === 1"
+                        @change="selectVersion(version)"
+                    >
+                        <template #label="{value}">
+                            <span>Version: </span>
+                            <span style="font-weight: bold">{{ value }}</span>
+                        </template>
+                        <el-option
+                            v-for="item in pluginsStore.versions"
+                            :key="item"
+                            :label="item"
+                            :value="item"
+                        />
+                    </el-select>
+                </div>
+            </div>
+        </template>
         <template #menu>
             <Toc @router-change="onRouterChange" v-if="pluginsStore.plugins" :plugins="pluginsStore.plugins.filter(p => !p.subGroup)" />
         </template>
         <template #content>
             <div class="plugin-doc">
-                <div class="d-flex align-items-center justify-content-between gap-3">
-                    <div class="d-flex gap-3 mb-3 align-items-center">
-                        <TaskIcon
-                            class="plugin-icon"
-                            :cls="pluginType"
-                            onlyIcon
-                            :icons="pluginsStore.icons"
-                        />
-                        <h4 class="mb-0">
-                            {{ pluginName }}
-                        </h4>
-                        <el-button
-                            v-if="releaseNotesUrl"
-                            size="small"
-                            class="release-notes-btn"
-                            :icon="GitHub"
-                            @click="openReleaseNotes"
-                        >
-                            {{ $t('plugins.release') }}
-                        </el-button>
-                    </div>
-
-                    <div class="mb-3 versions" v-if="(pluginsStore.versions?.length ?? 0) > 0">
-                        <el-select
-                            v-model="version"
-                            placeholder="Version"
-                            size="small"
-                            :disabled="(pluginsStore.versions?.length ?? 0) === 1"
-                            @change="selectVersion(version)"
-                        >
-                            <template #label="{value}">
-                                <span>Version: </span>
-                                <span style="font-weight: bold">{{ value }}</span>
-                            </template>
-                            <el-option
-                                v-for="item in pluginsStore.versions"
-                                :key="item"
-                                :label="item"
-                                :value="item"
-                            />
-                        </el-select>
-                    </div>
-                </div>
                 <Suspense v-loading="isLoading">
                     <SchemaToHtml
                         class="plugin-schema"
@@ -219,13 +220,89 @@
 <style scoped lang="scss">
     @import "../../styles/components/plugin-doc";
 
+    .plugin-secondary-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        padding: 1rem 1.5rem;
+        background-color: var(--ks-background-panel);
+        flex: 1;
+        min-height: 64px;
+        
+        .plugin-icon {
+            width: 35px;
+            height: 35px;
+            margin-left: 30px;
+        }
+        
+        .plugin-name {
+            font-size: 1.5rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .release-notes-btn {
+            background-color: var(--ks-background-info);
+            color: var(--ks-content-info);
+            border: 1px solid var(--ks-border-info);
+            font-family: 'Courier New', Courier, monospace;
+            white-space: nowrap;
+            
+            :deep(.material-design-icon) {
+                position: absolute;
+                bottom: 0;
+            }
+        }
+    }
+
     .versions {
-        min-width: 200px;
+        min-width: 150px;
     }
 
     :deep(.main-container) {
         background: var(--ks-background-panel);
         margin: 0;
+        padding: 0;
+    }
+    
+    .plugin-doc {
         padding: 1rem;
+        background-color: var(--ks-background-panel);
+    }
+    
+    @media (max-width: 767px) {
+        .plugin-secondary-header {
+            flex-wrap: wrap;
+            padding: 0.5rem;
+            gap: 0.5rem;
+            border-bottom: 1px solid var(--ks-border-primary);
+            
+            .plugin-icon {
+                width: 36px;
+                height: 36px;
+                margin-left: -10px;
+            }
+            
+            .plugin-name {
+                font-size: 1rem;
+            }
+            
+            .release-notes-btn {
+                padding: 6px 12px;
+                font-size: 0.875rem;
+                min-width: auto;
+            }
+            
+            .versions {
+                width: 100%;
+                min-width: auto;
+            }
+        }
+        
+        .plugin-doc {
+            padding: 0.75rem;
+        }
     }
 </style>

ui/src/components/plugins/PluginDocumentationWrapper.vue

@@ -27,4 +27,4 @@
     padding: 1rem ;
     min-height: 100%;
 }
-</style>
+</style>

ui/src/components/plugins/Toc.vue

@@ -52,7 +52,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {isEntryAPluginElementPredicate, TaskIcon} from "@kestra-io/ui-libs";
     import {mapStores} from "pinia";
     import {usePluginsStore} from "../../stores/plugins";
@@ -190,23 +190,39 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+    @import "@kestra-io/ui-libs/src/scss/variables";
+
     .plugins-list {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        
+        .search {
+            flex-shrink: 0;
+            background-color: var(--ks-background-panel);
+            padding-bottom: 0.5rem;
+        }
+        
+        .el-collapse {
+            flex: 1;
+        }
+        
         &.enhance-readability {
             padding: 1.5rem;
             background-color: var(--bs-gray-100);
         }
 
         .el-collapse-item__header {
-            font-size: 0.875rem;
+            font-size: 0.75rem;
         }
 
         ul {
             list-style: none;
             padding-inline-start: 0;
             margin-bottom: 0;
-            font-size: var(--font-size-xs);
-            margin-left: .5rem;
+            font-size: 0.6875rem;
+            margin-left: .25rem;
         }
 
         h6,
@@ -217,26 +233,26 @@
 
         .toc-h3 {
             .icon {
-                width: var(--font-size-sm);
-                height: var(--font-size-sm);
+                width: 0.875rem;
+                height: 0.875rem;
                 display: inline-block;
                 position: relative;
             }
 
             h6 {
-                font-size: 1.1em;
+                font-size: 0.75rem;
             }
 
             .toc-h4 {
-                margin-left: .5rem;
+                margin-left: .25rem;
 
                 h6 {
-                    font-size: var(--font-size-sm);
-                    margin-bottom: .5rem;
+                    font-size: 0.6875rem;
+                    margin-bottom: .25rem;
                 }
 
                 li {
-                    margin-bottom: .5rem;
+                    margin-bottom: .25rem;
                 }
             }
         }
@@ -245,4 +261,92 @@
     .selected {
         color: var(--ks-content-link);
     }
+    
+    @media (max-width: 767px) {
+        .plugins-list {
+            .search {
+                position: sticky;
+                top: 0;
+                z-index: 10;
+            }
+            
+            .el-collapse {
+                overflow-y: auto;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        .plugins-list {
+            .el-collapse-item__header {
+                font-size: 0.8125rem;
+            }
+
+            ul {
+                font-size: 0.75rem;
+                margin-left: .375rem;
+            }
+
+            .toc-h3 {
+                .icon {
+                    width: 1rem;
+                    height: 1rem;
+                }
+
+                h6 {
+                    font-size: 0.875rem;
+                }
+
+                .toc-h4 {
+                    margin-left: .375rem;
+
+                    h6 {
+                        font-size: 0.75rem;
+                        margin-bottom: .375rem;
+                    }
+
+                    li {
+                        margin-bottom: .375rem;
+                    }
+                }
+            }
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .plugins-list {
+            .el-collapse-item__header {
+                font-size: 0.875rem;
+            }
+
+            ul {
+                font-size: var(--font-size-xs);
+                margin-left: .5rem;
+            }
+
+            .toc-h3 {
+                .icon {
+                    width: var(--font-size-sm);
+                    height: var(--font-size-sm);
+                }
+
+                h6 {
+                    font-size: 1.1em;
+                }
+
+                .toc-h4 {
+                    margin-left: .5rem;
+
+                    h6 {
+                        font-size: var(--font-size-sm);
+                        margin-bottom: .5rem;
+                    }
+
+                    li {
+                        margin-bottom: .5rem;
+                    }
+                }
+            }
+        }
+    }
 </style>

webserver/src/test/resources/application-test.yml

@@ -172,6 +172,7 @@ kestra:
         - "/api/v1/main/executions/webhook/"
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h

worker/src/test/resources/application-test.yml

@@ -54,6 +54,7 @@ kestra:
         - "/api/v1/executions/webhook/"
     liveness:
       enabled: false
+    termination-grace-period: 5s
     service:
       purge:
         initial-delay: 1h