From 648a8499c2a7b40d130b9055e4c48c47b94d8200 Mon Sep 17 00:00:00 2001
From: Maxim Lyubimov <m.lyubimov@flipperdevices.com>
Date: Thu, 15 Feb 2024 16:45:49 +0400
Subject: [PATCH] fix: Correct CLI display when changing font-size

---
 frontend/src/pages/Cli.vue | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Cli.vue b/frontend/src/pages/Cli.vue
index f7bff15..f398540 100644
--- a/frontend/src/pages/Cli.vue
+++ b/frontend/src/pages/Cli.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page class="column items-center bg-black q-pl-sm full-width">
+  <q-page class="column items-center bg-black q-pl-sm full-width" :style-fn="myTweak">
     <div
       v-if="!mainFlags.connected"
       class="column flex-center q-my-xl"
@@ -11,7 +11,11 @@
       ></q-spinner>
       <p class="text-white">Waiting for Flipper...</p>
     </div>
-    <div v-if="mainFlags.connected && !flags.rpcActive" class="full-width" style="height: calc(100vh - 50px)">
+    <div
+      ref="terminalWrapper"
+      v-if="mainFlags.connected && !flags.rpcActive"
+      class="full-width"
+    >
       <div id="terminal-container" class="fit bg-black"></div>
 
       <q-btn
@@ -86,6 +90,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { dom } from 'quasar'
 import { Terminal } from 'xterm'
 import 'xterm/css/xterm.css'
 import { FitAddon } from 'xterm-addon-fit'
@@ -121,6 +126,7 @@ const clientsCount = ref(0)
 const clientsPollingInterval = ref(null)
 const fontSize = ref(14)
 let serializeAddon = null
+let fitAddon = null
 const dump = ref('')
 
 const init = () => {
@@ -129,7 +135,7 @@ const init = () => {
     fontSize: fontSize.value,
     allowProposedApi: true
   })
-  const fitAddon = new FitAddon()
+  fitAddon = new FitAddon()
   terminal.value.loadAddon(fitAddon)
   serializeAddon = new SerializeAddon()
   terminal.value.loadAddon(serializeAddon)
@@ -153,6 +159,10 @@ const init = () => {
     }, 500)
     write(data)
   })
+
+  window.onresize = () => {
+    fitAddon.fit()
+  }
 }
 const write = (data) => {
   flipper.value.write(data)
@@ -308,9 +318,22 @@ watch(fontSize, (newSize) => {
   if (terminal.value) {
     terminal.value.options.fontSize = Number(newSize)
     localStorage.setItem('cli-fontSize', newSize)
+
+    fitAddon.fit()
   }
 })
 
+const terminalWrapper = ref(null)
+const myTweak = (offset) => {
+  const height = offset ? `calc(100vh - ${offset}px)` : '100vh'
+  if (terminalWrapper.value) {
+    dom.css(terminalWrapper.value, {
+      minHeight: height
+    })
+  }
+  return { minHeight: height }
+}
+
 onMounted(() => {
   dump.value = localStorage.getItem('cli-dump')
   if (mainFlags.value.connected) {