diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
index edb7159475b..00cf27653ff 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
@@ -23,7 +23,7 @@ import axios, {
   registerErrorToastInterceptor,
 } from '../utils/axios';
 import waitForPolyfill from '../utils/eventsource-polyfill';
-import logtail from '../utils/logtail';
+import logtail, { getLogfileWindowMetadata } from '../utils/logtail';
 import uri from '../utils/uri';
 
 import { useSbaConfig } from '@/sba-config';
@@ -412,11 +412,35 @@ class Instance {
 
   streamLogfile(interval: number) {
     return logtail(
-      (opt) => this.axios.get(uri`actuator/logfile`, opt),
+      (opt) =>
+        this.axios.get(uri`actuator/logfile`, {
+          ...opt,
+          suppressToast: (error: AxiosError) => error.response?.status === 416,
+        }),
       interval,
     );
   }
 
+  async fetchLogfileRange(start: number, end: number): Promise<LogfileRange> {
+    const response = await this.axios.get(uri`actuator/logfile`, {
+      responseType: 'text',
+      headers: {
+        Accept: 'text/plain',
+        Range: `bytes=${start}-${end}`,
+      },
+      suppressToast: (error: AxiosError) => error.response?.status === 416,
+    });
+    const metadata = getLogfileWindowMetadata(response);
+
+    return {
+      data: response.data,
+      totalBytes: metadata.totalBytes,
+      windowStart: metadata.windowStart,
+      windowEnd: metadata.windowEnd,
+      status: response.status,
+    };
+  }
+
   async listMBeans() {
     return this.axios.get(uri`actuator/jolokia/list`, {
       headers: { Accept: 'application/json' },
@@ -544,6 +568,14 @@ type Endpoint = {
   url: string;
 };
 
+export type LogfileRange = {
+  data: string;
+  totalBytes: number;
+  windowStart: number;
+  windowEnd: number;
+  status: number;
+};
+
 export const DOWN_STATES = ['OUT_OF_SERVICE', 'DOWN', 'OFFLINE', 'RESTRICTED'];
 export const UP_STATES = ['UP'];
 export const UNKNOWN_STATES = ['UNKNOWN'];
diff --git a/spring-boot-admin-server-ui/src/main/frontend/utils/logtail.ts b/spring-boot-admin-server-ui/src/main/frontend/utils/logtail.ts
index 5e5d0c6c076..cf09f61f5bd 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/utils/logtail.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/utils/logtail.ts
@@ -13,12 +13,65 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { EMPTY, Observable, catchError, concatMap, of, timer } from './rxjs';
+import {
+  EMPTY,
+  Observable,
+  catchError,
+  concatMap,
+  of,
+  throwError,
+  timer,
+} from './rxjs';
 
-export default (getFn, interval, initialSize = 300 * 1024) => {
+export const DEFAULT_LOGFILE_CHUNK_SIZE = 300 * 1024;
+
+export enum StreamType {
+  Data = 'data',
+  Reset = 'reset',
+  Empty = 'empty',
+}
+
+const parseInteger = (value, fallback) => {
+  const parsed = parseInt(value, 10);
+  return Number.isNaN(parsed) ? fallback : parsed;
+};
+
+export const getTotalBytesFrom416 = (response) => {
+  const contentRange = response.headers?.get?.('content-range');
+  const match = contentRange?.match(/^bytes\s+\*\/(\d+)$/i);
+
+  return match ? parseInteger(match[1], undefined) : undefined;
+};
+
+export const getLogfileWindowMetadata = (response) => {
+  const contentLength = response.data.length;
+  const contentRange = response.headers.get('content-range');
+  const rangeMatch = contentRange?.match(/^bytes\s+(\d+)-(\d+)\/(\d+|\*)$/i);
+
+  if (rangeMatch) {
+    return {
+      windowStart: parseInteger(rangeMatch[1], 0),
+      windowEnd: parseInteger(rangeMatch[2], Math.max(contentLength - 1, 0)),
+      totalBytes: parseInteger(rangeMatch[3], contentLength),
+    };
+  }
+
+  const totalBytes = parseInteger(
+    response.headers.get('content-length'),
+    contentLength,
+  );
+
+  return {
+    windowStart: 0,
+    windowEnd: Math.max(contentLength - 1, 0),
+    totalBytes,
+  };
+};
+
+export default (getFn, interval, initialSize = DEFAULT_LOGFILE_CHUNK_SIZE) => {
   let range = `bytes=-${initialSize}`;
   let size = 0;
-  let atTheEnd = false;
+  let streamUpdated = true;
 
   return timer(0, interval).pipe(
     concatMap(() => {
@@ -28,63 +81,68 @@ export default (getFn, interval, initialSize = 300 * 1024) => {
           headers: { range, Accept: 'text/plain' },
         })
           .then((response) => {
+            streamUpdated = false;
             observer.next(response);
             observer.complete();
           })
           .catch((error) => observer.error(error));
       }).pipe(
-        catchError((error) => of({ data: '', status: error.response.status })),
+        catchError((error) => {
+          if (error.response?.status !== 416) {
+            return throwError(() => error);
+          }
+
+          return of({
+            data: '',
+            status: error.response?.status,
+            headers: error.response?.headers,
+          });
+        }),
       );
     }),
     concatMap((response) => {
-      let initial = size === 0;
-      const contentLength = response.data.length;
-
-      if (response.status === 200) {
-        if (!initial) {
-          throw 'Expected 206 - Partial Content on subsequent requests.';
+      //resetting when log file is compressed
+      if (response.status === 416) {
+        const currentSize = getTotalBytesFrom416(response);
+        if (currentSize === size) {
+          return EMPTY;
         }
-        size = contentLength;
-        range = `bytes=${size - 1}-`;
-      } else if (response.status === 206) {
-        const contentRangeParts = response.headers['content-range'].split('/');
-        size = parseInt(contentRangeParts[1]);
-        // The end value of the range is always one byte less than the size when at the end
-        atTheEnd = parseInt(contentRangeParts[0].split('-')[1]) == size - 1;
-        range = `bytes=${size - 1}-`;
-      } else if (response.status === 416) {
         size = 0;
         range = `bytes=-${initialSize}`;
-        initial = true;
+        streamUpdated = true;
+        return of({ type: StreamType.Reset });
+      }
+      const { windowStart, windowEnd, totalBytes } =
+        getLogfileWindowMetadata(response);
+      let addendum = response.data;
+      let addendumWindowStart = windowStart;
+      if (response.status === 206 || response.status === 200) {
+        if (totalBytes > size) {
+          streamUpdated = true;
+          const overlap = Math.max(size - windowStart, 0);
+          addendum = addendum.substring(overlap);
+          addendumWindowStart = windowStart + overlap;
+          size = totalBytes;
+          range = `bytes=${Math.max(size - 1, 0)}-`;
+        }
       } else {
         throw 'Unexpected response status: ' + response.status;
       }
-
-      let addendum = null;
-      let skipped = 0;
-
-      if (initial) {
-        if (contentLength >= size) {
-          addendum = response.data;
-        } else {
-          // In case of a partial response find the first line break.
-          addendum = response.data.substring(response.data.indexOf('\n') + 1);
-          skipped = size - addendum.length;
-        }
-      } else if (response.data.length > 1) {
-        // Remove the first byte which has been part of the previous response.
-        addendum = response.data.substring(1);
+      if (size === 0) {
+        return of({ type: StreamType.Empty });
       }
 
-      return addendum
-        ? of({
-            totalBytes: size,
-            skipped,
-            // The log file always temporarily ends with a new line until the next one is written.
-            // Therefore, if we're at the end of it, we drop such a new line.
-            addendum: atTheEnd ? addendum.trimEnd() : addendum,
-          })
-        : EMPTY;
+      if (streamUpdated) {
+        return of({
+          type: StreamType.Data,
+          totalBytes: size,
+          addendum,
+          windowStart: addendumWindowStart,
+          windowEnd,
+        });
+      } else {
+        return EMPTY;
+      }
     }),
   );
 };
diff --git a/spring-boot-admin-server-ui/src/main/frontend/utils/rxjs.ts b/spring-boot-admin-server-ui/src/main/frontend/utils/rxjs.ts
index a3b5ad9c564..3f47975c1f1 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/utils/rxjs.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/utils/rxjs.ts
@@ -32,6 +32,7 @@ export {
   debounceTime,
   mergeWith,
   map,
+  retry,
   retryWhen,
   tap,
   filter,
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.de.json
index 1666c0e9df8..866f21d6f34 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.de.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.de.json
@@ -3,7 +3,15 @@
     "logfile": {
       "label": "Log",
       "download": "Herunterladen",
-      "wrap_lines": "Zeilen umbrechen"
+      "wrap_lines": "Zeilen umbrechen",
+      "page_up": "Seite nach oben",
+      "page_down": "Seite nach unten",
+      "previous_chunk": "Vorheriger Abschnitt",
+      "next_chunk": "Nächster Abschnitt",
+      "resume_follow": "Live-Ansicht fortsetzen",
+      "stop_follow": "Live-Ansicht anhalten",
+      "reconnecting": "Verbindung wird wiederhergestellt...",
+      "compressed_reset": "Logdatei komprimiert, Seite wird zurückgesetzt."
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.en.json
index 8e0e2b909f9..df189814d9d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.en.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.en.json
@@ -3,7 +3,15 @@
     "logfile": {
       "label": "Logfile",
       "download": "Download",
-      "wrap_lines": "Wrap lines"
+      "wrap_lines": "Wrap lines",
+      "page_up": "Page up",
+      "page_down": "Page down",
+      "previous_chunk": "Previous chunk",
+      "next_chunk": "Next chunk",
+      "resume_follow": "Resume follow",
+      "stop_follow": "Stop following",
+      "reconnecting": "Reconnecting...",
+      "compressed_reset": "Logfile compressed, resetting page."
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.es.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.es.json
index 724c7d54e6b..d786c9d2bcd 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.es.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.es.json
@@ -3,8 +3,15 @@
     "logfile": {
       "label": "Archivo de log",
       "download": "Descargar",
-
-      "wrap_lines": "Ajustar líneas"
+      "wrap_lines": "Ajustar líneas",
+      "page_up": "Subir página",
+      "page_down": "Bajar página",
+      "previous_chunk": "Fragmento anterior",
+      "next_chunk": "Fragmento siguiente",
+      "resume_follow": "Reanudar seguimiento",
+      "stop_follow": "Detener seguimiento",
+      "reconnecting": "Reconectando...",
+      "compressed_reset": "Archivo de registro comprimido, restableciendo la página"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.fr.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.fr.json
index 8a5c72e802e..80dd7ddc10c 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.fr.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.fr.json
@@ -2,7 +2,16 @@
   "instances": {
     "logfile": {
       "label": "Fichier de log",
-      "download": "Téléchargement"
+      "download": "Téléchargement",
+      "wrap_lines": "Retour à la ligne",
+      "page_up": "Page vers le haut",
+      "page_down": "Page vers le bas",
+      "previous_chunk": "Segment précédent",
+      "next_chunk": "Segment suivant",
+      "resume_follow": "Reprendre le suivi",
+      "stop_follow": "Arrêter le suivi",
+      "reconnecting": "Reconnexion...",
+      "compressed_reset": "Fichier journal compressé, réinitialisation de la page"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.is.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.is.json
index 0c0dfcbbee7..0fc7d34216d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.is.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.is.json
@@ -2,7 +2,16 @@
   "instances": {
     "logfile": {
       "label": "Annálaskrá",
-      "download": "Niðurhal"
+      "download": "Niðurhal",
+      "wrap_lines": "Línuskipting",
+      "page_up": "Síða upp",
+      "page_down": "Síða niður",
+      "previous_chunk": "Fyrri hluti",
+      "next_chunk": "Næsti hluti",
+      "resume_follow": "Fylgja aftur",
+      "stop_follow": "Hætta að fylgja",
+      "reconnecting": "Endurtengist...",
+      "compressed_reset": "Atvikaskrá þjöppuð, síðan er endurstillt"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ko.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ko.json
index cd8994f94cc..45b4ca84490 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ko.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ko.json
@@ -2,7 +2,16 @@
   "instances": {
     "logfile": {
       "label": "로그파일",
-      "download": "다운로드"
+      "download": "다운로드",
+      "wrap_lines": "줄 바꿈",
+      "page_up": "페이지 위로",
+      "page_down": "페이지 아래로",
+      "previous_chunk": "이전 구간",
+      "next_chunk": "다음 구간",
+      "resume_follow": "실시간 추적 재개",
+      "stop_follow": "실시간 추적 중지",
+      "reconnecting": "다시 연결 중...",
+      "compressed_reset": "로그 파일이 압축되었습니다. 페이지를 재설정합니다"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.pt-BR.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.pt-BR.json
index b11ff6016da..2fa1889364f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.pt-BR.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.pt-BR.json
@@ -2,7 +2,16 @@
   "instances": {
     "logfile": {
       "label": "Arquivo de Log",
-      "download": "Download"
+      "download": "Download",
+      "wrap_lines": "Quebrar linhas",
+      "page_up": "Subir página",
+      "page_down": "Descer página",
+      "previous_chunk": "Trecho anterior",
+      "next_chunk": "Próximo trecho",
+      "resume_follow": "Retomar acompanhamento",
+      "stop_follow": "Parar acompanhamento",
+      "reconnecting": "Reconectando...",
+      "compressed_reset": "Arquivo de log compactado, redefinindo a página"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ru.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ru.json
index 7cf7a720722..12ef10bdf61 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ru.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.ru.json
@@ -2,7 +2,16 @@
   "instances": {
     "logfile": {
       "label": "Лог-файл",
-      "download": "Загрузить"
+      "download": "Загрузить",
+      "wrap_lines": "Перенос строк",
+      "page_up": "Страница вверх",
+      "page_down": "Страница вниз",
+      "previous_chunk": "Предыдущий фрагмент",
+      "next_chunk": "Следующий фрагмент",
+      "resume_follow": "Возобновить слежение",
+      "stop_follow": "Остановить слежение",
+      "reconnecting": "Повторное подключение...",
+      "compressed_reset": "Файл журнала сжат, страница сбрасывается"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-CN.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-CN.json
index ecb7c1ee088..7dfd61ed92c 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-CN.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-CN.json
@@ -2,7 +2,16 @@
   "instances": {
     "logfile": {
       "label": "日志文件",
-      "download": "下载"
+      "download": "下载",
+      "wrap_lines": "自动换行",
+      "page_up": "向上翻页",
+      "page_down": "向下翻页",
+      "previous_chunk": "上一段",
+      "next_chunk": "下一段",
+      "resume_follow": "恢复跟踪",
+      "stop_follow": "停止跟踪",
+      "reconnecting": "正在重新连接...",
+      "compressed_reset": "日志文件已压缩，正在重置页面。"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-TW.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-TW.json
index 3d2fa9a1d77..5d0603510e5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-TW.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/i18n.zh-TW.json
@@ -3,7 +3,15 @@
     "logfile": {
       "label": "日誌檔案",
       "download": "下載",
-      "wrap_lines": "自動換行"
+      "wrap_lines": "自動換行",
+      "page_up": "向上翻頁",
+      "page_down": "向下翻頁",
+      "previous_chunk": "上一段",
+      "next_chunk": "下一段",
+      "resume_follow": "恢復追蹤",
+      "stop_follow": "停止追蹤",
+      "reconnecting": "正在重新連線...",
+      "compressed_reset": "記錄檔已壓縮，正在重設頁面。"
     }
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue
index 0e906e31e4e..95e25a24a9e 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue
@@ -26,7 +26,17 @@
         <div class="flex items-center justify-end gap-1">
           <div class="flex-1">
             <span v-text="$t('instances.logfile.label')" />&nbsp;
-            <small class="hidden md:block" v-text="skippedBytesString" />
+            <span
+              v-if="isRetryingLogfile"
+              aria-live="polite"
+              class="logfile-reconnecting"
+              v-text="$t('instances.logfile.reconnecting')"
+            />
+            <small class="hidden md:block">
+              <span v-text="skippedBytesString" />
+              &nbsp;
+              <span v-text="remainingBytesString" />
+            </small>
           </div>
           <div class="flex items-start">
             <div class="flex items-center h-5">
@@ -48,41 +58,74 @@
           </div>
 
           <div class="mx-3 btn-group">
-            <sba-button :disabled="atTop" @click="scrollToTop">
-              <svg
-                class="h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7 11l5-5m0 0l5 5m-5-5v12"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
+            <sba-button
+              :aria-label="
+                $t(
+                  isFollowing
+                    ? 'instances.logfile.stop_follow'
+                    : 'instances.logfile.resume_follow',
+                )
+              "
+              :disabled="isChunkLoading || isRetryingLogfile"
+              :primary="isFollowing"
+              :title="
+                $t(
+                  isFollowing
+                    ? 'instances.logfile.stop_follow'
+                    : 'instances.logfile.resume_follow',
+                )
+              "
+              @click="toggleFollowMode"
+            >
+              <font-awesome-icon :icon="faArrowsDownToLine" />
             </sba-button>
-            <sba-button :disabled="atBottom" @click="scrollToBottom">
-              <svg
-                class="h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17 13l-5 5m0 0l-5-5m5 5V6"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
+            <sba-button
+              :aria-label="
+                $t(
+                  isFollowing
+                    ? 'instances.logfile.page_up'
+                    : 'instances.logfile.previous_chunk',
+                )
+              "
+              :disabled="!canPageUp"
+              :title="
+                $t(
+                  isFollowing
+                    ? 'instances.logfile.page_up'
+                    : 'instances.logfile.previous_chunk',
+                )
+              "
+              @click="pageUp"
+            >
+              <font-awesome-icon :icon="faArrowUp" />
+            </sba-button>
+            <sba-button
+              :aria-label="
+                $t(
+                  isFollowing
+                    ? 'instances.logfile.page_down'
+                    : 'instances.logfile.next_chunk',
+                )
+              "
+              :disabled="!canPageDown"
+              :title="
+                $t(
+                  isFollowing
+                    ? 'instances.logfile.page_down'
+                    : 'instances.logfile.next_chunk',
+                )
+              "
+              @click="pageDown"
+            >
+              <font-awesome-icon :icon="faArrowDown" />
             </sba-button>
           </div>
 
-          <sba-button class="hidden md:block" @click="downloadLogfile()">
+          <sba-button
+            class="hidden md:block"
+            :disabled="isRetryingLogfile"
+            @click="downloadLogfile()"
+          >
             <font-awesome-icon icon="download" />&nbsp;
             <span v-text="$t('instances.logfile.download')" />
           </sba-button>
@@ -95,14 +138,31 @@
       :class="{ 'wrap-lines': wrapLines }"
       class="log-viewer overflow-x-auto text-sm -mx-6 -my-20 pt-14"
     >
-      <table ref="logContainer" class="table-striped min-w-full" />
+      <table class="table-striped min-w-full">
+        <tbody>
+          <tr
+            v-for="(line, index) in displayLines"
+            :key="`${windowStart}-${index}`"
+          >
+            <td>
+              <br v-if="line === ''" />
+              <pre v-else v-html="renderLine(line)" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </sba-instance-section>
 </template>
 
 <script>
+import {
+  faArrowDown,
+  faArrowUp,
+  faArrowsDownToLine,
+} from '@fortawesome/free-solid-svg-icons';
+import { useNotificationCenter } from '@stekoe/vue-toast-notificationcenter';
 import { AnsiUp } from 'ansi_up/ansi_up';
-import { chunk } from 'lodash-es';
 import prettyBytes from 'pretty-bytes';
 import { debounceTime, fromEvent } from 'rxjs';
 
@@ -110,17 +170,41 @@ import subscribing from '@/mixins/subscribing';
 import sbaConfig from '@/sba-config';
 import Instance from '@/services/instance';
 import autolink from '@/utils/autolink';
+import { DEFAULT_LOGFILE_CHUNK_SIZE, StreamType } from '@/utils/logtail';
 import {
+  EMPTY,
   animationFrameScheduler,
+  catchError,
   concatAll,
   concatMap,
+  filter,
+  from,
   map,
   of,
+  retry,
   tap,
+  timer,
 } from '@/utils/rxjs';
 import { VIEW_GROUP } from '@/views/ViewGroup';
 import SbaInstanceSection from '@/views/instances/shell/sba-instance-section';
 
+const LogfileMode = Object.freeze({
+  FOLLOW: 'follow',
+  MANUAL: 'manual',
+});
+const ChunkDirection = Object.freeze({
+  PREVIOUS: 'previous',
+  NEXT: 'next',
+  REPLACE: 'replace',
+});
+
+const SCROLL_BOTTOM_TOLERANCE = 2;
+const MAX_BYTES_RENDERED = 600 * 1024;
+const TAIL_PIN_MAINTENANCE_DURATION = 200;
+const LOGFILE_RECONNECT_RESET_RETRY_COUNT = 10;
+
+const notificationCenter = useNotificationCenter({});
+
 export default {
   components: { SbaInstanceSection },
   mixins: [subscribing],
@@ -135,17 +219,96 @@ export default {
     error: null,
     atBottom: false,
     atTop: true,
-    skippedBytes: null,
+    isTailPinned: true,
+    renderedLines: [],
+    displayLines: [],
+    tailRemainderState: {
+      remainderString: '',
+      presentOrnotBoolean: false,
+      byteEnd: -1,
+    },
+    headRemainderState: {
+      remainderString: '',
+      presentOrnotBoolean: false,
+      byteStart: -1,
+    },
+    newLineByteSize: 1,
     wrapLines: false,
+    logTailSubscription: null,
     scrollSubscription: null,
+    tailPinMaintenanceTimer: null,
+    isMaintainingTailPin: false,
+    manualMetadataSubscription: null,
+    mode: LogfileMode.FOLLOW,
+    chunkSize: DEFAULT_LOGFILE_CHUNK_SIZE,
+    windowStart: 0,
+    windowEnd: -1,
+    totalBytes: 0,
+    loadedBytes: 0,
+    isChunkLoading: false,
+    isRetryingLogfile: false,
+    shouldResetLogfileOnReconnect: false,
+    faArrowDown,
+    faArrowsDownToLine,
+    faArrowUp,
   }),
   computed: {
+    skippedBytes() {
+      return Math.max(this.windowStart, 0);
+    },
     skippedBytesString() {
       if (this.skippedBytes != null) {
         return `skipped ${prettyBytes(this.skippedBytes)}`;
       }
       return '';
     },
+    remainingBytesString() {
+      if (!this.isFollowing && this.totalBytes > 0) {
+        return `remaining ${prettyBytes(this.totalBytes - this.windowEnd - 1)}`;
+      }
+      return '';
+    },
+    isFollowing() {
+      return this.mode === LogfileMode.FOLLOW;
+    },
+    canLoadPrevious() {
+      return this.windowStart > 0;
+    },
+    canLoadNext() {
+      return (
+        this.windowEnd >= 0 &&
+        this.totalBytes > 0 &&
+        this.windowEnd < this.totalBytes - 1
+      );
+    },
+    canPageUp() {
+      //Follow mode
+      let canPageUpFollowMode =
+        this.isFollowing &&
+        (!this.atTop || (this.atTop && this.canLoadPrevious));
+      //Manual mode
+      let canPageUpManualMode =
+        !this.isFollowing && (!this.atTop || this.canLoadPrevious);
+
+      return (
+        !this.isChunkLoading &&
+        !this.isRetryingLogfile &&
+        (canPageUpFollowMode || canPageUpManualMode)
+      );
+    },
+    canPageDown() {
+      //Follow mode
+      let canPageDownFollowMode = this.isFollowing && !this.atBottom;
+      //Manual mode
+      let canPageDownManualMode =
+        !this.isFollowing && (!this.atBottom || this.canLoadNext);
+
+      return (
+        !this.isChunkLoading &&
+        !this.isRetryingLogfile &&
+        (canPageDownFollowMode || canPageDownManualMode)
+      );
+    },
   },
   created() {
     this.ansiUp = new AnsiUp();
@@ -153,77 +316,539 @@ export default {
   mounted() {
     const element = this.$refs.scrollContainer;
     this.scrollSubscription = fromEvent(element, 'scroll')
-      .pipe(
-        debounceTime(25),
-        map(() => element.scrollTop),
-      )
-      .subscribe((scrollTop) => {
-        this.atTop = scrollTop === 0;
-        this.atBottom =
-          Math.abs(
-            element.clientHeight - (element.scrollHeight - element.scrollTop),
-          ) <= 1;
-      });
+      .pipe(debounceTime(25))
+      .subscribe(() => this.updateScrollState());
+
+    if (this.isFollowing && this.displayLines.length > 0) {
+      this.scrollToBottom();
+    }
   },
   beforeUnmount() {
-    if (this.scrollSubscription && !this.scrollSubscription.closed) {
+    this.stopManualMetadataPolling();
+    this.unsubscribe();
+    this.stopScrollSubscription();
+    this.stopTailPinMaintenance();
+  },
+  methods: {
+    prettyBytes,
+    splitLines(content) {
+      return content === '' ? [] : content.split(/\n/);
+    },
+    calculateLoadedBytes() {
+      return Math.max(this.windowEnd - this.windowStart + 1, 0);
+    },
+    clearRemainderStates() {
+      this.clearHeadRemainderState();
+      this.clearTailRemainderState();
+    },
+    clearTailRemainderState() {
+      this.setTailRemainderState('', -1);
+      this.tailRemainderState.presentOrnotBoolean = false;
+    },
+    setTailRemainderState(remainderString, byteEnd) {
+      this.tailRemainderState.presentOrnotBoolean = true;
+      this.tailRemainderState.remainderString = remainderString;
+      this.tailRemainderState.byteEnd = byteEnd;
+    },
+    clearHeadRemainderState() {
+      this.setHeadRemainderState('', -1);
+      this.headRemainderState.presentOrnotBoolean = false;
+    },
+    setHeadRemainderState(remainderString, byteStart) {
+      this.headRemainderState.presentOrnotBoolean = true;
+      this.headRemainderState.remainderString = remainderString;
+      this.headRemainderState.byteStart = byteStart;
+    },
+    appendRenderedLines(lines, windowStart, windowEnd) {
+      let linesToAppend = [...lines];
+      this.windowEnd = windowEnd;
+      //first pass
+      if (
+        this.renderedLines.length === 0 &&
+        !this.headRemainderState.presentOrnotBoolean &&
+        !this.tailRemainderState.presentOrnotBoolean
+      ) {
+        if (linesToAppend.length === 1) {
+          this.setTailRemainderState(
+            this.tailRemainderState.remainderString + linesToAppend[0],
+            this.windowEnd,
+          );
+          this.windowStart = windowStart;
+          return;
+        }
+        this.renderedLines = linesToAppend;
+        this.windowStart = windowStart;
+        if (this.windowStart > 0) {
+          if (this.renderedLines[0] !== '') {
+            this.setHeadRemainderState(lines[0], this.windowStart);
+          }
+          this.renderedLines.shift();
+        }
+        if (this.renderedLines.at(-1) !== '') {
+          this.setTailRemainderState(this.renderedLines.at(-1), this.windowEnd);
+        }
+        this.renderedLines.pop();
+        this.displayLines = this.renderedLines;
+      } else {
+        //consequent passes
+        if (linesToAppend.length === 1) {
+          // If a few bytes are added without the newline , simply update remainders do not render anything new.
+          this.setTailRemainderState(
+            this.tailRemainderState.remainderString + linesToAppend[0],
+            this.windowEnd,
+          );
+          return;
+        }
+        //no remainder
+        if (!this.tailRemainderState.presentOrnotBoolean) {
+          this.windowEnd = windowEnd;
+          this.renderedLines = [...this.renderedLines, ...linesToAppend];
+        }
+        //remainder present
+        else if (this.tailRemainderState.presentOrnotBoolean) {
+          this.windowEnd = windowEnd;
+          let completedLine =
+            this.tailRemainderState.remainderString + linesToAppend[0];
+          linesToAppend.shift();
+          this.renderedLines = [
+            ...this.renderedLines,
+            completedLine,
+            ...linesToAppend,
+          ];
+          this.clearTailRemainderState();
+        }
+        if (this.renderedLines.at(-1) !== '') {
+          this.setTailRemainderState(this.renderedLines.at(-1), this.windowEnd);
+        }
+        this.renderedLines.pop();
+        if (this.calculateLoadedBytes() > MAX_BYTES_RENDERED) {
+          this.evictOverflowingRenderedLines();
+        }
+        this.displayLines = this.renderedLines;
+      }
+    },
+    evictOverflowingRenderedLines() {
+      let evictedBytes = 0;
+      let evictedLines = 0;
+      let previousSize = this.calculateLoadedBytes();
+      if (this.headRemainderState.presentOrnotBoolean) {
+        evictedBytes += this.headRemainderState.remainderString.length;
+        evictedBytes += this.newLineByteSize;
+        this.clearHeadRemainderState();
+      }
+      while (previousSize - evictedBytes > DEFAULT_LOGFILE_CHUNK_SIZE) {
+        evictedBytes += this.renderedLines[evictedLines].length;
+        evictedBytes += this.newLineByteSize;
+        evictedLines += 1;
+      }
+      this.windowStart += evictedBytes;
+      this.renderedLines.splice(0, evictedLines);
+    },
+    renderLine(line) {
+      return autolink(this.ansiUp.ansi_to_html(line));
+    },
+    resetLogfileWindowState() {
+      this.renderedLines = [];
+      this.displayLines = [];
+      this.clearRemainderStates();
+      this.loadedBytes = 0;
+      this.windowStart = 0;
+      this.windowEnd = -1;
+      this.totalBytes = 0;
+    },
+    resetFollowState() {
+      this.stopManualMetadataPolling();
+      this.unsubscribe();
+      this.mode = LogfileMode.FOLLOW;
+      this.error = null;
+      this.hasLoaded = false;
+      this.isChunkLoading = false;
+      this.isRetryingLogfile = false;
+      this.shouldResetLogfileOnReconnect = false;
+      this.atBottom = false;
+      this.atTop = true;
+      this.isTailPinned = true;
+      this.resetLogfileWindowState();
+    },
+    isLogfileRangeInvalid(error) {
+      return error?.response?.status === 416;
+    },
+    notifyLogfileCompressed() {
+      notificationCenter.warning(this.$t('instances.logfile.compressed_reset'));
+    },
+    async handleLogfileCompressed() {
+      this.notifyLogfileCompressed();
+      this.resetFollowState();
+      await this.subscribe();
+    },
+    startManualMetadataPolling() {
+      this.manualMetadataSubscription = timer(
+        0,
+        sbaConfig.uiSettings.pollTimer.logfile,
+      )
+        .pipe(
+          concatMap(() =>
+            from(this.instance.fetchLogfileRange(0, 0)).pipe(
+              tap((response) => {
+                if (!this.isFollowing) {
+                  if (response.totalBytes <= this.windowEnd) {
+                    void this.handleLogfileCompressed();
+                    return;
+                  }
+                  this.totalBytes = response.totalBytes;
+                  this.error = null;
+                  this.isRetryingLogfile = false;
+                }
+              }),
+              catchError((error) => {
+                if (this.isLogfileRangeInvalid(error)) {
+                  void this.handleLogfileCompressed();
+                  return EMPTY;
+                }
+                console.warn('Fetching logfile metadata failed:', error);
+                this.hasLoaded = true;
+                this.error = error;
+                this.isRetryingLogfile = true;
+                return EMPTY;
+              }),
+            ),
+          ),
+        )
+        .subscribe();
+    },
+    stopManualMetadataPolling() {
+      try {
+        this.manualMetadataSubscription?.unsubscribe();
+      } finally {
+        this.manualMetadataSubscription = null;
+      }
+    },
+    unsubscribe() {
+      try {
+        this.logTailSubscription?.unsubscribe();
+      } finally {
+        this.logTailSubscription = null;
+      }
+    },
+    async subscribe() {
+      if (this.logTailSubscription && !this.logTailSubscription.closed) {
+        return;
+      }
+
+      this.unsubscribe();
+      this.logTailSubscription = await this.createSubscription();
+    },
+    stopScrollSubscription() {
       try {
-        this.scrollSubscription.unsubscribe();
+        this.scrollSubscription?.unsubscribe();
       } finally {
         this.scrollSubscription = null;
       }
-    }
-  },
-  methods: {
-    prettyBytes,
+    },
+    maintainTailPin() {
+      if (!this.isFollowing || !this.isTailPinned) {
+        return;
+      }
+
+      this.isMaintainingTailPin = true;
+      window.clearTimeout(this.tailPinMaintenanceTimer);
+      this.tailPinMaintenanceTimer = window.setTimeout(() => {
+        this.tailPinMaintenanceTimer = null;
+        this.isMaintainingTailPin = false;
+        this.updateScrollState();
+      }, TAIL_PIN_MAINTENANCE_DURATION);
+    },
+    stopTailPinMaintenance() {
+      window.clearTimeout(this.tailPinMaintenanceTimer);
+      this.tailPinMaintenanceTimer = null;
+      this.isMaintainingTailPin = false;
+    },
+    getMaxScrollTop(element) {
+      return Math.max(element.scrollHeight - element.clientHeight, 0);
+    },
+    isScrolledToBottom(element) {
+      return (
+        this.getMaxScrollTop(element) - element.scrollTop <=
+        SCROLL_BOTTOM_TOLERANCE
+      );
+    },
+    syncScrollState(element = this.$refs.scrollContainer) {
+      if (!element) {
+        return;
+      }
+
+      this.atTop = element.scrollTop <= SCROLL_BOTTOM_TOLERANCE;
+      this.atBottom = this.isScrolledToBottom(element);
+
+      if (this.isFollowing) {
+        if (this.atBottom) {
+          this.isTailPinned = true;
+        } else if (!this.isMaintainingTailPin) {
+          this.isTailPinned = false;
+        }
+      }
+    },
+    async setManualChunk(response, direction) {
+      this.renderedLines = this.splitLines(response.data);
+      this.loadedBytes = this.calculateLoadedBytes();
+      this.windowStart = response.windowStart;
+      this.windowEnd = response.windowEnd;
+      this.totalBytes = response.totalBytes;
+      if (ChunkDirection.REPLACE === direction) {
+        this.clearRemainderStates();
+        if (this.windowStart > 0) {
+          const headLine = this.renderedLines[0];
+          if (headLine !== undefined && headLine !== '') {
+            this.setHeadRemainderState(headLine, this.windowStart);
+          }
+          this.renderedLines.shift();
+        }
+        const tailLine = this.renderedLines.at(-1);
+        if (tailLine !== undefined && tailLine !== '') {
+          this.setTailRemainderState(tailLine, this.windowEnd);
+        }
+        if (this.renderedLines.length > 0) {
+          this.renderedLines.pop();
+        }
+        this.displayLines = this.renderedLines;
+      } else if (ChunkDirection.NEXT === direction) {
+        if (this.tailRemainderState.presentOrnotBoolean) {
+          this.renderedLines[0] =
+            this.tailRemainderState.remainderString + this.renderedLines[0];
+          this.clearTailRemainderState();
+        }
+        this.clearHeadRemainderState();
+        if (this.renderedLines.at(-1) !== '') {
+          this.setTailRemainderState(this.renderedLines.at(-1), this.windowEnd);
+        }
+        this.renderedLines.pop();
+        this.displayLines = this.renderedLines;
+      } else if (ChunkDirection.PREVIOUS === direction) {
+        if (this.headRemainderState.presentOrnotBoolean) {
+          let lastIndex = this.renderedLines.length - 1;
+          this.renderedLines[lastIndex] =
+            this.renderedLines[lastIndex] +
+            this.headRemainderState.remainderString;
+          this.clearHeadRemainderState();
+        }
+        this.clearTailRemainderState();
+        if (this.windowStart > 0) {
+          if (this.renderedLines[0] !== '') {
+            this.setHeadRemainderState(this.renderedLines[0], this.windowStart);
+          }
+          this.renderedLines.shift();
+        }
+        this.displayLines = this.renderedLines;
+      }
+      this.hasLoaded = true;
+      await this.$nextTick();
+      this.scrollToTop();
+    },
     createSubscription() {
-      this.error = null;
+      this.unsubscribe();
       return this.instance
         .streamLogfile(sbaConfig.uiSettings.pollTimer.logfile)
         .pipe(
-          tap(
-            (part) => (this.skippedBytes = this.skippedBytes || part.skipped),
+          tap((part) => {
+            if (part.type === StreamType.Reset) {
+              void this.handleLogfileCompressed();
+              return;
+            }
+            if (part.type === StreamType.Empty) {
+              console.warn('File size is 0 bytes');
+              if (this.shouldResetLogfileOnReconnect) {
+                this.resetLogfileWindowState();
+              }
+              this.hasLoaded = true;
+              this.error = null;
+              this.isRetryingLogfile = false;
+              this.shouldResetLogfileOnReconnect = false;
+            }
+          }),
+          filter((part) => part.type === StreamType.Data),
+          map((part) =>
+            of(
+              {
+                lines: this.splitLines(part.addendum),
+                windowStart: part.windowStart,
+                windowEnd: part.windowEnd,
+                totalBytes: part.totalBytes,
+              },
+              animationFrameScheduler,
+            ),
           ),
-          concatMap((part) => chunk(part.addendum.split(/\r?\n/), 250)),
-          map((lines) => of(lines, animationFrameScheduler)),
           concatAll(),
+          retry({
+            count: Infinity,
+            delay: (error, retryCount) => {
+              this.hasLoaded = true;
+              console.warn('Fetching logfile failed:', error);
+              this.error = error;
+              this.isRetryingLogfile = true;
+              this.shouldResetLogfileOnReconnect =
+                this.shouldResetLogfileOnReconnect ||
+                retryCount > LOGFILE_RECONNECT_RESET_RETRY_COUNT;
+              return timer(sbaConfig.uiSettings.pollTimer.logfile);
+            },
+          }),
         )
         .subscribe({
-          next: (lines) => {
+          next: ({ lines, windowStart, windowEnd, totalBytes }) => {
+            const shouldKeepAtBottom = this.isFollowing && this.isTailPinned;
+            if (shouldKeepAtBottom) {
+              this.maintainTailPin();
+            }
+            if (this.shouldResetLogfileOnReconnect) {
+              this.resetLogfileWindowState();
+            }
+            this.totalBytes = totalBytes;
+            this.appendRenderedLines(lines, windowStart, windowEnd);
             this.hasLoaded = true;
-            const logContainer = this.$refs.logContainer;
-            lines.forEach((line) => {
-              let content;
-              if (line) {
-                content = document.createElement('pre');
-                content.innerHTML = autolink(this.ansiUp.ansi_to_html(line));
-              } else {
-                content = document.createElement('br');
-              }
-              const row = document.createElement('tr');
-              const col = document.createElement('td');
-              col.appendChild(content);
-              row.appendChild(col);
-              logContainer.appendChild(row);
-            });
-
-            if (this.atBottom) {
-              this.scrollToBottom();
+            this.error = null;
+            this.isRetryingLogfile = false;
+            this.shouldResetLogfileOnReconnect = false;
+            if (shouldKeepAtBottom) {
+              this.$nextTick(() => {
+                if (this.isFollowing) {
+                  this.scrollToBottom();
+                }
+              });
             }
           },
           error: (error) => {
             this.hasLoaded = true;
             console.warn('Fetching logfile failed:', error);
             this.error = error;
+            this.isRetryingLogfile = false;
+            this.shouldResetLogfileOnReconnect = false;
+            this.logTailSubscription = null;
           },
         });
     },
+    async loadChunk(start, end, direction) {
+      this.isChunkLoading = true;
+      try {
+        const response = await this.instance.fetchLogfileRange(start, end);
+        await this.setManualChunk(response, direction);
+      } catch (error) {
+        if (this.isLogfileRangeInvalid(error)) {
+          await this.handleLogfileCompressed();
+          return;
+        }
+        console.warn('Fetching logfile chunk failed:', error);
+        this.error = error;
+      } finally {
+        this.isChunkLoading = false;
+      }
+    },
+    async loadPreviousChunk() {
+      let end = this.windowStart - 1;
+      const start = Math.max(0, end - this.chunkSize + 1);
+      if (start === 0) {
+        end = Math.min(this.totalBytes - 1, this.chunkSize - 1);
+      }
+      const direction =
+        end < this.windowStart
+          ? ChunkDirection.PREVIOUS
+          : ChunkDirection.REPLACE;
+      await this.loadChunk(start, end, direction);
+    },
+    async loadNextChunk() {
+      let start = this.windowEnd + 1;
+      const end = Math.min(this.totalBytes - 1, start + this.chunkSize - 1);
+      if (end === this.totalBytes - 1) {
+        start = Math.max(0, end - this.chunkSize + 1);
+      }
+      const direction =
+        start > this.windowEnd ? ChunkDirection.NEXT : ChunkDirection.REPLACE;
+      await this.loadChunk(start, end, direction);
+    },
+    async toggleFollowMode() {
+      if (this.isFollowing) {
+        this.unsubscribe();
+        this.stopTailPinMaintenance();
+        this.mode = LogfileMode.MANUAL;
+        this.isTailPinned = false;
+        this.startManualMetadataPolling();
+      } else {
+        this.resetFollowState();
+        this.maintainTailPin();
+        await this.subscribe();
+        this.$nextTick(() => this.scrollToBottom());
+      }
+    },
+    async pageUp() {
+      //Follow Mode
+      if (this.isFollowing) {
+        if (this.atTop) {
+          //switch to manual mode Toggle and also move previous chunk pending
+          await this.toggleFollowMode();
+          await this.loadPreviousChunk();
+        } else {
+          this.stopTailPinMaintenance();
+          this.isTailPinned = false;
+          this.scrollToTop();
+        }
+      }
+      //Manual Mode
+      else {
+        this.syncScrollState();
+        if (!this.atTop) {
+          this.scrollToTop();
+        } else if (this.canLoadPrevious) {
+          await this.loadPreviousChunk();
+        }
+      }
+    },
+    async pageDown() {
+      this.syncScrollState();
+
+      //Follow mode
+      if (this.isFollowing) {
+        if (!this.atBottom) {
+          this.scrollToBottom();
+        }
+      }
+      //Manual Mode
+      else {
+        if (!this.atBottom) {
+          this.scrollToBottom();
+        } else if (this.canLoadNext) {
+          await this.loadNextChunk();
+        }
+      }
+    },
+    updateScrollState() {
+      this.syncScrollState();
+    },
     scrollToTop() {
-      this.$refs.scrollContainer.scrollTop = 0;
+      const element = this.$refs.scrollContainer;
+      if (!element) {
+        return;
+      }
+      element.scrollTop = 0;
+      this.syncScrollState(element);
     },
     scrollToBottom() {
-      this.$refs.scrollContainer.scrollTop =
-        this.$refs.scrollContainer.scrollHeight;
+      const element = this.$refs.scrollContainer;
+      if (!element) {
+        return;
+      }
+      element.scrollTop = this.getMaxScrollTop(element);
+      this.syncScrollState(element);
+
+      if (this.isFollowing) {
+        this.isTailPinned = true;
+      }
+
+      this.$nextTick(() => {
+        const element = this.$refs.scrollContainer;
+        if (!element) {
+          return;
+        }
+        element.scrollTop = this.getMaxScrollTop(element);
+        this.syncScrollState(element);
+      });
     },
     downloadLogfile() {
       window.open(`instances/${this.instance.id}/actuator/logfile`, '_blank');
@@ -267,6 +892,23 @@ export default {
   margin: 0;
 }
 
+.logfile-reconnecting {
+  @apply text-sm font-semibold text-red-600 whitespace-nowrap;
+
+  animation: logfile-retry-flicker 1s ease-in-out infinite;
+}
+
+@keyframes logfile-retry-flicker {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.35;
+  }
+}
+
 .log-viewer {
   overflow: auto;
   margin: 0;
@@ -283,6 +925,7 @@ export default {
 .log-viewer pre {
   padding: 0 0.75em;
   margin-bottom: 1px;
+  @apply w-full;
 }
 
 .log-viewer td:hover {