fix remote background height and adjust other items to fit to screen

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>

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 }"

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 }"

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>