make changelog alone scrollable

dashboard/src/components/SystemUpdate.vue

@@ -277,14 +277,17 @@ onMounted(async () => {
       <div v-if="pendingUpdate">
         <div v-if="canUpdate">
           <p class="text-danger" v-if="pendingUpdate.unstable">{{ $t('settings.updateDialog.unstableWarning') }}</p>
-          <p>{{ $t('settings.updateDialog.changes') }}:</p>
-          <ul class="changelogs">
-            <li v-for="change in pendingUpdate.changelog" :key="change" v-html="marked.parse(change)"></li>
-          </ul>
-          <br/>
-          <p v-if="updateError.generic" class="error-label">{{ updateError.generic }}</p>
+
+          <div>{{ $t('settings.updateDialog.changes') }}:</div>
+          <div class="changelog-container">
+            <ul class="changelogs">
+              <li v-for="change in pendingUpdate.changelog" :key="change" v-html="marked.parse(change)"></li>
+            </ul>
+          </div>
 
           <Checkbox v-model="skipBackup" :label="$t('settings.updateDialog.skipBackupCheckbox')"/>
+
+          <p v-if="updateError.generic" class="error-label">{{ updateError.generic }}</p>
         </div>
 
         <div v-else>
@@ -356,9 +359,19 @@ onMounted(async () => {
 
 <style>
 
+.changelogs {
+  padding-left: 15px;
+}
+
 .changelogs > li > p {
   margin: 0;
-  padding: 0;
+  padding: 2px;
+}
+
+.changelog-container {
+  overflow: auto;
+  max-height: 60vh;
+  margin-bottom: 10px;
 }
 
 </style>