From ff78d3d83c87c0805843928e25aaceb01c66ec7d Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Wed, 6 Mar 2024 15:49:39 +0100
Subject: [PATCH] feat(ui): add full-screen button on drawer

close kestra-io/kestra#2627
---
 ui/src/components/Drawer.vue                  | 61 +++++++++++++++++++
 .../components/executions/ExecutionOutput.vue | 10 ++-
 ui/src/components/executions/FilePreview.vue  | 13 ++--
 ui/src/components/executions/Metrics.vue      | 12 ++--
 ui/src/components/executions/Outputs.vue      | 10 ++-
 ui/src/components/flows/FlowRevisions.vue     |  7 ++-
 ui/src/components/flows/FlowTriggers.vue      | 11 ++--
 ui/src/components/flows/MetadataInputs.vue    |  9 ++-
 ui/src/components/flows/MetadataVariables.vue | 10 ++-
 ui/src/components/flows/TaskEdit.vue          | 11 ++--
 ui/src/components/flows/tasks/TaskAnyOf.vue   | 10 ++-
 ui/src/components/flows/tasks/TaskComplex.vue | 11 ++--
 .../components/flows/tasks/TaskCondition.vue  | 10 ++-
 ui/src/components/flows/tasks/TaskTask.vue    | 10 ++-
 ui/src/components/inputs/EditorView.vue       | 22 +++----
 ui/src/components/inputs/LowCodeEditor.vue    |  8 +--
 ui/src/components/layout/MarkdownTooltip.vue  | 12 ++--
 ui/src/components/layout/News.vue             |  8 ++-
 .../styles/layout/element-plus-overload.scss  |  4 ++
 19 files changed, 140 insertions(+), 109 deletions(-)
 create mode 100644 ui/src/components/Drawer.vue

diff --git a/ui/src/components/Drawer.vue b/ui/src/components/Drawer.vue
new file mode 100644
index 00000000000..415617789c0
--- /dev/null
+++ b/ui/src/components/Drawer.vue
@@ -0,0 +1,61 @@
+<template>
+    <el-drawer
+        :model-value="props.modelValue"
+        @update:model-value="emit('update:modelValue', $event)"
+        destroy-on-close
+        lock-scroll
+        size=""
+        :append-to-body="true"
+        :class="{'full-screen': fullScreen}"
+        ref="editorDomElement"
+    >
+        <template #header>
+            <span>
+                {{ title }}
+                <slot name="header" />
+            </span>
+            <el-button link class="full-screen">
+                <Fullscreen :title="$t('toggle fullscreen')" @click="toggleFullScreen" />
+            </el-button>
+        </template>
+
+        <template #footer>
+            <slot name="footer" />
+        </template>
+
+        <template #default>
+            <slot />
+        </template>
+    </el-drawer>
+</template>
+
+<script setup>
+    import {ref} from "vue";
+    import Fullscreen from "vue-material-design-icons/Fullscreen.vue"
+
+    const props = defineProps({
+        modelValue: {
+            type: Boolean,
+            required: true
+        },
+        title: {
+            type: String,
+            required: false,
+            default: undefined
+        },
+    });
+
+    const emit = defineEmits(["update:modelValue"])
+
+    const fullScreen = ref(false);
+
+    const toggleFullScreen = () => {
+        fullScreen.value = !fullScreen.value;
+    }
+</script>
+
+<style scoped lang="scss">
+    button.full-screen {
+        font-size: 24px;
+    }
+</style>
\ No newline at end of file
diff --git a/ui/src/components/executions/ExecutionOutput.vue b/ui/src/components/executions/ExecutionOutput.vue
index 9870c31ae29..b9f62f046b4 100644
--- a/ui/src/components/executions/ExecutionOutput.vue
+++ b/ui/src/components/executions/ExecutionOutput.vue
@@ -28,13 +28,9 @@
             </el-form-item>
         </collapse>
 
-        <el-drawer
+        <drawer
             v-if="isModalOpen"
             v-model="isModalOpen"
-            destroy-on-close
-            lock-scroll
-            :append-to-body="true"
-            size=""
             :title="$t('eval.title')"
         >
             <template #footer>
@@ -52,7 +48,7 @@
                 <p><strong>{{ debugError }}</strong></p>
                 <pre class="mb-0">{{ debugStackTrace }}</pre>
             </el-alert>
-        </el-drawer>
+        </drawer>
 
         <el-table
             :data="outputsPaginated"
@@ -99,6 +95,7 @@
     import Pagination from "../layout/Pagination.vue";
     import {apiUrl} from "override/utils/route";
     import SubFlowLink from "../flows/SubFlowLink.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
@@ -107,6 +104,7 @@
             VarValue,
             Editor,
             Collapse,
+            Drawer
         },
         data() {
             return {
diff --git a/ui/src/components/executions/FilePreview.vue b/ui/src/components/executions/FilePreview.vue
index 45e5dad7491..9e745bda2af 100644
--- a/ui/src/components/executions/FilePreview.vue
+++ b/ui/src/components/executions/FilePreview.vue
@@ -2,16 +2,12 @@
     <el-button size="small" type="primary" :icon="EyeOutline" @click="getFilePreview">
         Preview
     </el-button>
-    <el-drawer
+    <drawer
         v-if="selectedPreview === value && filePreview"
         v-model="isPreviewOpen"
-        destroy-on-close
-        lock-scroll
-        size=""
-        :append-to-body="true"
     >
         <template #header>
-            <h3>{{ $t("preview") }}</h3>
+            {{ $t("preview") }}
         </template>
         <template #default>
             <el-alert v-if="filePreview.truncated" show-icon type="warning" :closable="false" class="mb-2">
@@ -58,7 +54,7 @@
                 </el-form-item>
             </el-form>
         </template>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -70,9 +66,10 @@
     import ListPreview from "../ListPreview.vue";
     import {mapGetters, mapState} from "vuex";
     import Markdown from "../layout/Markdown.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
-        components: {Markdown, ListPreview, Editor},
+        components: {Markdown, ListPreview, Editor, Drawer},
         props: {
             value: {
                 type: String,
diff --git a/ui/src/components/executions/Metrics.vue b/ui/src/components/executions/Metrics.vue
index 9ebfbd36d76..2e27d849d12 100644
--- a/ui/src/components/executions/Metrics.vue
+++ b/ui/src/components/executions/Metrics.vue
@@ -6,17 +6,13 @@
         {{ $t('metrics') }}
     </el-dropdown-item>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
         :title="$t('metrics')"
-        destroy-on-close
-        :append-to-body="true"
-        size=""
-        direction="ltr"
     >
         <metrics-table ref="table" :task-run-id="taskRun.id" :execution="execution" />
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -26,10 +22,12 @@
 
 <script>
     import MetricsTable from "./MetricsTable.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
-            MetricsTable
+            MetricsTable,
+            Drawer
         },
         data() {
             return {
diff --git a/ui/src/components/executions/Outputs.vue b/ui/src/components/executions/Outputs.vue
index 2095b29caba..52385db7030 100644
--- a/ui/src/components/executions/Outputs.vue
+++ b/ui/src/components/executions/Outputs.vue
@@ -7,21 +7,17 @@
         {{ $t('outputs') }}
     </el-dropdown-item>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
         :title="$t('outputs')"
-        destroy-on-close
-        :append-to-body="true"
-        size=""
-        direction="ltr"
     >
         <vars
             :execution="execution"
             class="table-unrounded mt-1"
             :data="outputs"
         />
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -30,10 +26,12 @@
 
 <script>
     import Vars from "../executions/Vars.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
             Vars,
+            Drawer,
         },
         props: {
             outputs: {
diff --git a/ui/src/components/flows/FlowRevisions.vue b/ui/src/components/flows/FlowRevisions.vue
index 491541d4cfd..fb0bbfce24b 100644
--- a/ui/src/components/flows/FlowRevisions.vue
+++ b/ui/src/components/flows/FlowRevisions.vue
@@ -74,13 +74,13 @@
             :show-doc="false"
         />
 
-        <el-drawer v-if="isModalOpen" v-model="isModalOpen" destroy-on-close :append-to-body="true" size="">
+        <drawer v-if="isModalOpen" v-model="isModalOpen">
             <template #header>
                 <h5>{{ $t("revision") + `: ` + revision }}</h5>
             </template>
 
             <editor v-model="revisionYaml" lang="yaml" />
-        </el-drawer>
+        </drawer>
     </div>
     <div v-else>
         <el-alert class="mb-0" show-icon :closable="false">
@@ -99,10 +99,11 @@
     import YamlUtils from "../../utils/yamlUtils";
     import Editor from "../../components/inputs/Editor.vue";
     import Crud from "override/components/auth/Crud.vue";
+    import Drawer from "../Drawer.vue";
     import {saveFlowTemplate} from "../../utils/flowTemplate";
 
     export default {
-        components: {Editor, Crud},
+        components: {Editor, Crud, Drawer},
         created() {
             this.load();
         },
diff --git a/ui/src/components/flows/FlowTriggers.vue b/ui/src/components/flows/FlowTriggers.vue
index e1089f9fb36..b47a35e3148 100644
--- a/ui/src/components/flows/FlowTriggers.vue
+++ b/ui/src/components/flows/FlowTriggers.vue
@@ -158,13 +158,9 @@
         </template>
     </el-dialog>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
-        destroy-on-close
-        lock-scroll
-        size=""
-        :append-to-body="true"
     >
         <template #header>
             <code>{{ triggerId }}</code>
@@ -172,7 +168,7 @@
 
         <markdown v-if="triggerDefinition && triggerDefinition.description" :source="triggerDefinition.description" />
         <vars :data="modalData" />
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -193,12 +189,13 @@
     import Kicon from "../Kicon.vue"
     import DateAgo from "../layout/DateAgo.vue";
     import Vars from "../executions/Vars.vue";
+    import Drawer from "../Drawer.vue";
     import permission from "../../models/permission";
     import action from "../../models/action";
     import moment from "moment";
 
     export default {
-        components: {Markdown, Kicon, DateAgo, Vars},
+        components: {Markdown, Kicon, DateAgo, Vars, Drawer},
         data() {
             return {
                 triggerId: undefined,
diff --git a/ui/src/components/flows/MetadataInputs.vue b/ui/src/components/flows/MetadataInputs.vue
index 6593a3e8135..9f5cf6ef342 100644
--- a/ui/src/components/flows/MetadataInputs.vue
+++ b/ui/src/components/flows/MetadataInputs.vue
@@ -1,11 +1,8 @@
 <template>
     <div class="w-100 d-flex flex-column align-items-center">
-        <el-drawer
+        <drawer
             v-if="isEditOpen"
             v-model="isEditOpen"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>inputs</code>
@@ -40,7 +37,7 @@
                     :definitions="inputSchema.schema.definitions"
                 />
             </div>
-        </el-drawer>
+        </drawer>
         <div class="w-100">
             <div>
                 <div class="d-flex w-100" v-for="(input, index) in newInputs" :key="index">
@@ -74,8 +71,10 @@
 </script>
 <script>
     import {mapState} from "vuex";
+    import Drawer from "../Drawer.vue";
 
     export default {
+        components: {Drawer},
         emits: ["update:modelValue"],
         props: {
             inputs: {
diff --git a/ui/src/components/flows/MetadataVariables.vue b/ui/src/components/flows/MetadataVariables.vue
index 6e65f89f47c..aac7cb6c25f 100644
--- a/ui/src/components/flows/MetadataVariables.vue
+++ b/ui/src/components/flows/MetadataVariables.vue
@@ -1,11 +1,8 @@
 <template>
     <div class="w-100">
-        <el-drawer
+        <drawer
             v-if="isEditOpen"
             v-model="isEditOpen"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>variables</code>
@@ -43,7 +40,7 @@
                     />
                 </el-form-item>
             </el-form>
-        </el-drawer>
+        </drawer>
         <div class="w-100">
             <div v-if="variables">
                 <div class="d-flex w-100" v-for="(value, index) in newVariables" :key="index">
@@ -83,9 +80,10 @@
 
 <script>
     import Editor from "../inputs/Editor.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
-        components: {Editor},
+        components: {Editor, Drawer},
         emits: ["update:modelValue"],
         props: {
             variables: {
diff --git a/ui/src/components/flows/TaskEdit.vue b/ui/src/components/flows/TaskEdit.vue
index c617abc0264..5731d8a75ae 100644
--- a/ui/src/components/flows/TaskEdit.vue
+++ b/ui/src/components/flows/TaskEdit.vue
@@ -6,13 +6,9 @@
         ref="taskEdit"
     >
         <span v-if="component !== 'el-button' && !isHidden">{{ $t("show task source") }}</span>
-        <el-drawer
+        <drawer
             v-if="isModalOpen"
             v-model="isModalOpen"
-            destroy-on-close
-            lock-scroll
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>{{ taskId || task?.id || $t("add task") }}</code>
@@ -81,7 +77,7 @@
                     </div>
                 </el-tab-pane>
             </el-tabs>
-        </el-drawer>
+        </drawer>
     </component>
 </template>
 
@@ -94,6 +90,7 @@
     import YamlUtils from "../../utils/yamlUtils";
     import Editor from "../inputs/Editor.vue";
     import TaskEditor from "./TaskEditor.vue";
+    import Drawer from "../Drawer.vue";
     import {canSaveFlowTemplate, saveFlowTemplate} from "../../utils/flowTemplate";
     import {mapGetters, mapState} from "vuex";
     import Utils from "../../utils/utils";
@@ -102,7 +99,7 @@
     import {SECTIONS} from "../../utils/constants";
 
     export default {
-        components: {Editor, TaskEditor, Markdown, ValidationError},
+        components: {Editor, TaskEditor, Drawer, Markdown, ValidationError},
         emits: ["update:task", "close"],
         props: {
             component: {
diff --git a/ui/src/components/flows/tasks/TaskAnyOf.vue b/ui/src/components/flows/tasks/TaskAnyOf.vue
index 360b5d73ede..afcbe20b801 100644
--- a/ui/src/components/flows/tasks/TaskAnyOf.vue
+++ b/ui/src/components/flows/tasks/TaskAnyOf.vue
@@ -8,13 +8,9 @@
         </template>
     </el-input>
 
-
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
-        destroy-on-close
-        size=""
-        :append-to-body="true"
     >
         <template #header>
             <code>{{ root }}</code>
@@ -54,7 +50,7 @@
                 {{ $t("save") }}
             </el-button>
         </template>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -64,9 +60,11 @@
 
 <script>
     import Task from "./Task"
+    import Drawer from "../../Drawer.vue"
 
     export default {
         mixins: [Task],
+        components: {Drawer},
         data() {
             return {
                 isOpen: false,
diff --git a/ui/src/components/flows/tasks/TaskComplex.vue b/ui/src/components/flows/tasks/TaskComplex.vue
index c6dde4b57d2..06bfad08165 100644
--- a/ui/src/components/flows/tasks/TaskComplex.vue
+++ b/ui/src/components/flows/tasks/TaskComplex.vue
@@ -8,13 +8,9 @@
         </template>
     </el-input>
 
-
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
-        destroy-on-close
-        size=""
-        :append-to-body="true"
     >
         <template #header>
             <code>{{ root }}</code>
@@ -33,7 +29,7 @@
                 {{ $t('save') }}
             </el-button>
         </template>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -43,8 +39,11 @@
 
 <script>
     import Task from "./Task"
+    import Drawer from "../../Drawer.vue"
+
     export default {
         mixins: [Task],
+        components: {Drawer},
         data() {
             return {
                 isOpen: false,
diff --git a/ui/src/components/flows/tasks/TaskCondition.vue b/ui/src/components/flows/tasks/TaskCondition.vue
index 8b772bfa210..72e3fe78a39 100644
--- a/ui/src/components/flows/tasks/TaskCondition.vue
+++ b/ui/src/components/flows/tasks/TaskCondition.vue
@@ -8,13 +8,10 @@
         </template>
     </el-input>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
         :title="root"
-        destroy-on-close
-        size=""
-        :append-to-body="true"
     >
         <template #header>
             <code>{{ root }}</code>
@@ -33,7 +30,7 @@
                 {{ $t('save') }}
             </el-button>
         </template>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -46,10 +43,11 @@
     import Task from "./Task"
     import YamlUtils from "../../../utils/yamlUtils";
     import TaskEditor from "../TaskEditor.vue"
+    import Drawer from "../../Drawer.vue"
 
     export default {
         mixins: [Task],
-        components: {TaskEditor},
+        components: {TaskEditor, Drawer},
         emits: ["update:modelValue"],
         data() {
             return {
diff --git a/ui/src/components/flows/tasks/TaskTask.vue b/ui/src/components/flows/tasks/TaskTask.vue
index 2fbd36ac135..5db1a3c4b20 100644
--- a/ui/src/components/flows/tasks/TaskTask.vue
+++ b/ui/src/components/flows/tasks/TaskTask.vue
@@ -8,12 +8,9 @@
         </template>
     </el-input>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
-        destroy-on-close
-        size=""
-        :append-to-body="true"
     >
         <template #header>
             <code>{{ root }}</code>
@@ -31,7 +28,7 @@
                 {{ $t('save') }}
             </el-button>
         </template>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -44,10 +41,11 @@
     import Task from "./Task"
     import YamlUtils from "../../../utils/yamlUtils";
     import TaskEditor from "../TaskEditor.vue"
+    import Drawer from "../../Drawer.vue"
 
     export default {
         mixins: [Task],
-        components: {TaskEditor},
+        components: {TaskEditor, Drawer},
         emits: ["update:modelValue"],
         data() {
             return {
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index e8269741c2e..5aef1c4ecbb 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -23,6 +23,7 @@
     import Utils from "@kestra-io/ui-libs/src/utils/Utils";
     import {apiUrl} from "override/utils/route";
     import EditorButtons from "./EditorButtons.vue";
+    import Drawer from "../Drawer.vue";
 
     const store = useStore();
     const router = getCurrentInstance().appContext.config.globalProperties.$router;
@@ -826,13 +827,10 @@
             />
         </div>
 
-        <el-drawer
+        <drawer
             v-if="isNewErrorOpen"
             v-model="isNewErrorOpen"
             title="Add a global error handler"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <el-form label-position="top">
                 <task-editor
@@ -846,14 +844,11 @@
                     {{ $t("save") }}
                 </el-button>
             </template>
-        </el-drawer>
-        <el-drawer
+        </drawer>
+        <drawer
             v-if="isNewTriggerOpen"
             v-model="isNewTriggerOpen"
             title="Add a trigger"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <el-form label-position="top">
                 <task-editor
@@ -867,13 +862,10 @@
                     {{ $t("save") }}
                 </el-button>
             </template>
-        </el-drawer>
-        <el-drawer
+        </drawer>
+        <drawer
             v-if="isEditMetadataOpen"
             v-model="isEditMetadataOpen"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>flow metadata</code>
@@ -897,7 +889,7 @@
                     {{ $t("save") }}
                 </el-button>
             </template>
-        </el-drawer>
+        </drawer>
     </div>
     <el-dialog v-if="confirmOutdatedSaveDialog" v-model="confirmOutdatedSaveDialog" destroy-on-close :append-to-body="true">
         <template #header>
diff --git a/ui/src/components/inputs/LowCodeEditor.vue b/ui/src/components/inputs/LowCodeEditor.vue
index 55f162d68eb..88875a9a506 100644
--- a/ui/src/components/inputs/LowCodeEditor.vue
+++ b/ui/src/components/inputs/LowCodeEditor.vue
@@ -9,6 +9,7 @@
     import LogLevelSelector from "../logs/LogLevelSelector.vue";
     import TaskRunDetails from "../logs/TaskRunDetails.vue";
     import Collapse from "../layout/Collapse.vue";
+    import Drawer from "../Drawer.vue";
 
     // Topology
     import {
@@ -340,12 +341,9 @@
 
         <!--    Drawer to task informations (logs, description, ..)   -->
         <!--    Assuming selectedTask is always the id and the required data for the opened drawer    -->
-        <el-drawer
+        <drawer
             v-if="isDrawerOpen && selectedTask"
             v-model="isDrawerOpen"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>{{ selectedTask.id }}</code>
@@ -373,7 +371,7 @@
             <div v-if="isShowDescriptionOpen">
                 <markdown class="markdown-tooltip" :source="selectedTask.description" />
             </div>
-        </el-drawer>
+        </drawer>
     </div>
 </template>
 
diff --git a/ui/src/components/layout/MarkdownTooltip.vue b/ui/src/components/layout/MarkdownTooltip.vue
index f499505d831..205dabd1691 100644
--- a/ui/src/components/layout/MarkdownTooltip.vue
+++ b/ui/src/components/layout/MarkdownTooltip.vue
@@ -7,28 +7,26 @@
             />
         </a>
 
-        <el-drawer
+        <drawer
             v-if="isOpen"
             v-model="isOpen"
             :title="title"
-            destroy-on-close
-            class="sm"
-            size=""
-            :append-to-body="true"
         >
             <markdown class="markdown-tooltip" :source="description" />
-        </el-drawer>
+        </drawer>
     </span>
 </template>
 
 <script>
     import HelpCircle from "vue-material-design-icons/HelpCircle.vue";
     import Markdown from "./Markdown.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
             HelpCircle,
-            Markdown
+            Markdown,
+            Drawer
         },
         data() {
             return {
diff --git a/ui/src/components/layout/News.vue b/ui/src/components/layout/News.vue
index 85b14046d1e..d0ccf761a2b 100644
--- a/ui/src/components/layout/News.vue
+++ b/ui/src/components/layout/News.vue
@@ -4,7 +4,7 @@
         <CheckboxBlankCircle v-if="hasUnread" class="new" title="" />
     </el-button>
 
-    <el-drawer size="50%" v-if="isOpen" v-model="isOpen" destroy-on-close :append-to-body="true" class="sm" :title="$t('feeds.title')">
+    <drawer v-if="isOpen" v-model="isOpen" :title="$t('feeds.title')">
         <div class="post" v-for="(feed, index) in feeds" :key="feed.id">
             <div v-if="feed.image" class="mt-2">
                 <img class="float-end" :src="feed.image" alt="">
@@ -22,7 +22,7 @@
 
             <el-divider v-if="index !== feeds.length - 1" />
         </div>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script>
@@ -32,6 +32,7 @@
     import CheckboxBlankCircle from "vue-material-design-icons/CheckboxBlankCircle.vue";
     import Markdown from "./Markdown.vue";
     import DateAgo from "./DateAgo.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
@@ -39,7 +40,8 @@
             OpenInNew,
             CheckboxBlankCircle,
             Markdown,
-            DateAgo
+            DateAgo,
+            Drawer
         },
         data() {
             return {
diff --git a/ui/src/styles/layout/element-plus-overload.scss b/ui/src/styles/layout/element-plus-overload.scss
index f2ee84eb8a7..da209d12347 100644
--- a/ui/src/styles/layout/element-plus-overload.scss
+++ b/ui/src/styles/layout/element-plus-overload.scss
@@ -707,6 +707,10 @@ form.ks-horizontal {
         }
     }
 
+    &.full-screen {
+        width: 99% !important;
+    }
+
     .el-drawer__header {
         padding: var(--spacer);
         margin-bottom: 0;