From ea79635d68f98629408a245e7742ebd84a84bd5c Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Mon, 8 Nov 2021 21:13:01 -0500
Subject: [PATCH] fix remote background height and adjust other items to fit to
 screen

---
 .../agents/remotebg/EventLogManager.vue       |  6 +++---
 .../agents/remotebg/ProcessManager.vue        |  2 +-
 .../agents/remotebg/ServicesManager.vue       |  2 +-
 src/views/RemoteBackground.vue                | 19 ++++++++-----------
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/agents/remotebg/EventLogManager.vue b/src/components/agents/remotebg/EventLogManager.vue
index db4dc62..4ab5770 100644
--- a/src/components/agents/remotebg/EventLogManager.vue
+++ b/src/components/agents/remotebg/EventLogManager.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row">
+    <div class="row q-pt-sm q-pl-sm">
       <div class="col-2">
         <q-select dense options-dense outlined v-model="days" :options="lastDaysOptions" :label="showDays" />
       </div>
@@ -15,7 +15,7 @@
       class="remote-bg-tbl-sticky"
       :rows="events"
       :columns="columns"
-      style="max-height: 85vh"
+      :style="{ 'max-height': `${$q.screen.height - 85}px` }"
       :pagination="{ rowsPerPage: 0, sortBy: 'record', descending: true }"
       :filter="filter"
       row-key="uid"
@@ -37,7 +37,7 @@
         <q-radio v-model="logType" color="cyan" val="System" label="System" />
         <q-radio v-model="logType" color="cyan" val="Security" label="Security" />
         <q-space />
-        <q-input v-model="filter" outlined label="Search" dense clearable>
+        <q-input v-model="filter" style="width: 300px" outlined label="Search" dense clearable>
           <template v-slot:prepend>
             <q-icon name="search" />
           </template>
diff --git a/src/components/agents/remotebg/ProcessManager.vue b/src/components/agents/remotebg/ProcessManager.vue
index 8f1339d..efcf61d 100644
--- a/src/components/agents/remotebg/ProcessManager.vue
+++ b/src/components/agents/remotebg/ProcessManager.vue
@@ -3,7 +3,7 @@
     dense
     :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
     class="remote-bg-tbl-sticky"
-    style="max-height: 85vh"
+    :style="{ 'max-height': `${$q.screen.height - 36}px` }"
     :rows="processes"
     :columns="columns"
     :pagination="{ rowsPerPage: 0, sortBy: 'cpu_percent', descending: true }"
diff --git a/src/components/agents/remotebg/ServicesManager.vue b/src/components/agents/remotebg/ServicesManager.vue
index 2ea15f5..d6be574 100644
--- a/src/components/agents/remotebg/ServicesManager.vue
+++ b/src/components/agents/remotebg/ServicesManager.vue
@@ -3,7 +3,7 @@
     dense
     :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
     class="remote-bg-tbl-sticky"
-    style="max-height: 85vh"
+    :style="{ 'max-height': `${$q.screen.height - 36}px` }"
     :rows="services"
     :columns="columns"
     :pagination="{ rowsPerPage: 0, sortBy: 'display_name', descending: false }"
diff --git a/src/views/RemoteBackground.vue b/src/views/RemoteBackground.vue
index 09f05ad..dda89e0 100644
--- a/src/views/RemoteBackground.vue
+++ b/src/views/RemoteBackground.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md">
+  <div>
     <q-tabs
       v-model="tab"
       dense
@@ -18,26 +18,23 @@
     </q-tabs>
     <q-separator />
     <q-tab-panels v-model="tab">
-      <q-tab-panel name="terminal">
+      <q-tab-panel name="terminal" class="q-pa-none">
         <iframe
-          style="overflow: hidden; height: 715px"
           :src="terminal"
-          width="100%"
-          height="100%"
-          scrolling="no"
+          :style="{ height: `${$q.screen.height - 30}px`, width: `${$q.screen.width}px` }"
         ></iframe>
       </q-tab-panel>
-      <q-tab-panel name="processes">
+      <q-tab-panel name="processes" class="q-pa-none">
         <ProcessManager :agent_id="agent_id" />
       </q-tab-panel>
-      <q-tab-panel name="services">
+      <q-tab-panel name="services" class="q-pa-none">
         <ServicesManager :agent_id="agent_id" />
       </q-tab-panel>
-      <q-tab-panel name="eventlog">
+      <q-tab-panel name="eventlog" class="q-pa-none">
         <EventLogManager :agent_id="agent_id" />
       </q-tab-panel>
-      <q-tab-panel name="filebrowser">
-        <iframe style="overflow: hidden; height: 715px" :src="file" width="100%" height="100%" scrolling="no"></iframe>
+      <q-tab-panel name="filebrowser" class="q-pa-none">
+        <iframe :src="file" :style="{ height: `${$q.screen.height - 30}px`, width: `${$q.screen.width}px` }"></iframe>
       </q-tab-panel>
     </q-tab-panels>
   </div>