diff --git a/resources/js/app/components/history/history-info.js b/resources/js/app/components/history/history-info.js
deleted file mode 100644
index a3566133b..000000000
--- a/resources/js/app/components/history/history-info.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import moment from 'moment';
-import { t } from 'ttag';
-import { PanelEvents } from '../panel-view';
-
-export default {
-    template: `<div class="history-info">
-        <section class="fieldset shrinks">
-            <header class="mx-1 tab tab-static unselectable">
-                <h2>
-                    <span v-if="authorName">${t`version by`}</span>
-                    <span v-if="authorName" class="has-font-weight-bold"><: authorName :></span>
-                    <span>${t`date`} <: formattedDate :></span>
-                </h2>
-            </header>
-            <div class="object-form px-1 shrinks">
-                <h4 v-if="user_action == 'create'">${t`Created`}:</h4>
-                <h4 v-if="user_action == 'update'">${t`Updated`}:</h4>
-                <h4 v-if="user_action == 'trash'">${t`Trashed`}</h4>
-                <h4 v-if="user_action == 'restore'">${t`Restored`}</h4>
-                <div class="fieldset">
-                    <div v-for="(value, key) in changed" v-html="value" class="container" v-if="allowed(key)"></div>
-
-                    <button v-if="canSave" class="mt-2" @click.stop.prevent="restore()">${t`Restore`}</button>
-                </div>
-            </div>
-        </section>
-    </div>`,
-
-    props: {
-        meta: Object,
-        id: String,
-        cansave: Boolean,
-    },
-
-    data() {
-        return {
-            changed: this.meta.changed,
-            created: this.meta.created,
-            user: this.meta.user,
-            user_action: this.meta.user_action,
-            canSave: true,
-        }
-    },
-
-    computed: {
-        formattedDate: function() {
-            return moment(this.created).format('D MMM YYYY kk:mm');
-        },
-        /**
-         * Get formatted user name.
-         * @param {Object} userObj User data
-         * @return {string}
-         */
-        authorName: function() {
-            if (!this.user?.attributes) {
-                return;
-            }
-            const user = this.user.attributes;
-
-            return user.title ||
-                `${user.name || ''} ${user.surname || ''}`.trim() ||
-                user.username ||
-                '';
-        },
-    },
-
-    async created() {
-        this.canSave = this.cansave;
-    },
-
-    methods: {
-        allowed(key) {
-            return (key !== 'model-type' && key !== '_csrfToken');
-        },
-        restore() {
-            PanelEvents.sendBack('history-info:restore', this.id);
-        },
-    }
-}
diff --git a/resources/js/app/components/history/history-info.vue b/resources/js/app/components/history/history-info.vue
new file mode 100644
index 000000000..86aeece40
--- /dev/null
+++ b/resources/js/app/components/history/history-info.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="history-info">
+        <section class="fieldset shrinks">
+            <header class="mx-1 tab tab-static unselectable">
+                <h2>
+                    <span v-if="authorName">{{ msgVersionBy }}</span>
+                    <span
+                        class="has-font-weight-bold"
+                        v-if="authorName"
+                    >
+                        {{ authorName }}
+                    </span>
+                    <span>{{ msgDate }} {{ formattedDate }}</span>
+                </h2>
+            </header>
+            <div class="object-form px-1 shrinks">
+                <h4 v-if="user_action == 'create'">
+                    {{ msgCreated }}:
+                </h4>
+                <h4 v-if="user_action == 'update'">
+                    {{ msgUpdated }}:
+                </h4>
+                <h4 v-if="user_action == 'trash'">
+                    {{ msgTrashed }}
+                </h4>
+                <h4 v-if="user_action == 'restore'">
+                    {{ msgRestored }}
+                </h4>
+                <div class="fieldset">
+                    <div
+                        v-for="(value, key) in changedAllowed"
+                        :key="key"
+                        class="container"
+                        v-html="value"
+                    />
+                    <button
+                        class="mt-2"
+                        @click.stop.prevent="restore()"
+                        v-if="canSave"
+                    >
+                        {{ msgRestore }}
+                    </button>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+import moment from 'moment';
+import { t } from 'ttag';
+import { PanelEvents } from '../panel-view';
+export default {
+    name: 'HistoryInfo',
+    props: {
+        meta: {
+            type: Object,
+            default: () => ({}),
+        },
+        id: {
+            type: String,
+            default: null,
+        },
+        cansave: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            changed: this.meta.changed,
+            changedAllowed: {},
+            created: this.meta.created,
+            user: this.meta.user,
+            user_action: this.meta.user_action,
+            canSave: true,
+            msgCreated: t`Created`,
+            msgDate: t`date`,
+            msgUpdated: t`Updated`,
+            msgTrashed: t`Trashed`,
+            msgRestored: t`Restored`,
+            msgRestore: t`Restore`,
+            msgVersionBy: t`version by`,
+        }
+    },
+    computed: {
+        authorName: function() {
+            if (!this.user?.attributes) {
+                return;
+            }
+            const user = this.user.attributes;
+            return user.title ||
+                `${user.name || ''} ${user.surname || ''}`.trim() ||
+                user.username ||
+                '';
+        },
+        formattedDate: function() {
+            return moment(this.created).format('D MMM YYYY kk:mm');
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.changedAllowed = {...this.changed};
+            const keys = Object.keys(this.changed);
+            for (const key in keys) {
+                if (['_csrfToken', 'model-type'].includes(key)) {
+                    delete this.changedAllowed[key];
+                }
+            }
+        });
+    },
+    async created() {
+        this.canSave = this.cansave;
+    },
+    methods: {
+        restore() {
+            PanelEvents.sendBack('history-info:restore', this.id);
+        },
+    }
+}
+</script>
diff --git a/templates/Element/Panel/panel.scss b/templates/Element/Panel/panel.scss
index c63684647..854f58090 100644
--- a/templates/Element/Panel/panel.scss
+++ b/templates/Element/Panel/panel.scss
@@ -13,6 +13,8 @@
     z-index: 1001;
 
     .main-panel {
+        overflow-x: hidden;
+        overflow-y: auto;
         height: 100%;
         background-color: $gray-800;
     }