Merge pull request #4477 from FlowFuse/2898-mitigate-chat-widget-bloc…

…king-elements

Mitigate chat widget blocking elements

frontend/src/components/DevicesBrowser.vue

@@ -1,6 +1,7 @@
 <template>
+    <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
     <div
-        class="space-y-2"
+        class="space-y-2 mb-14"
         data-el="devices-section"
     >
         <ff-loading

frontend/src/pages/application/Overview.vue

@@ -20,8 +20,8 @@
                 </ff-button>
             </template>
         </SectionTopMenu>
-
-        <div class="space-y-6 mb-12">
+        <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+        <div class="space-y-6 mb-14">
             <ff-data-table
                 v-if="instances?.length > 0"
                 data-el="cloud-instances"

frontend/src/pages/application/Snapshots.vue

@@ -11,7 +11,8 @@
         </div>
         <ff-loading v-if="loading" message="Loading Snapshots..." />
         <template v-if="snapshots.length > 0">
-            <ff-data-table data-el="snapshots" class="space-y-4" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
+            <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+            <ff-data-table data-el="snapshots" class="space-y-4 mb-14" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
                 <template #context-menu="{row}">
                     <ff-list-item :disabled="!hasPermission('snapshot:edit')" label="Edit Snapshot" @click="showEditSnapshotDialog(row)" />
                     <ff-list-item :disabled="!canViewSnapshot(row)" label="View Snapshot" @click="showViewSnapshotDialog(row)" />

frontend/src/pages/device/Snapshots/index.vue

@@ -16,7 +16,8 @@
     <div class="space-y-6">
         <ff-loading v-if="loading" message="Loading Snapshots..." />
         <template v-if="features.deviceEditor && snapshots.length > 0">
-            <ff-data-table data-el="snapshots" class="space-y-4" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
+            <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+            <ff-data-table data-el="snapshots" class="space-y-4 mb-14" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
                 <template v-if="hasPermission('device:snapshot:create')" #actions>
                     <ff-button v-if="hasPermission('snapshot:import')" kind="secondary" data-action="import-snapshot" :disabled="busy" @click="showImportSnapshotDialog"><template #icon-left><UploadIcon /></template>Upload Snapshot</ff-button>
                     <ff-button kind="primary" data-action="create-snapshot" :disabled="!developerMode || busy" @click="showCreateSnapshotDialog"><template #icon-left><PlusSmIcon /></template>Create Snapshot</ff-button>

frontend/src/pages/instance/Snapshots/index.vue

@@ -11,7 +11,8 @@
     <div class="space-y-6">
         <ff-loading v-if="loading" message="Loading Snapshots..." />
         <template v-if="snapshots.length > 0">
-            <ff-data-table data-el="snapshots" class="space-y-4" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
+            <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+            <ff-data-table data-el="snapshots" class="space-y-4 mb-14" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
                 <template v-if="hasPermission('project:snapshot:create')" #actions>
                     <ff-button v-if="hasPermission('snapshot:import')" kind="secondary" data-action="import-snapshot" :disabled="busy" @click="showImportSnapshotDialog"><template #icon-left><UploadIcon /></template>Upload Snapshot</ff-button>
                     <ff-button kind="primary" data-action="create-snapshot" :disabled="busy" @click="showCreateSnapshotDialog"><template #icon-left><PlusSmIcon /></template>Create Snapshot</ff-button>

frontend/src/pages/team/Applications/index.vue

@@ -44,7 +44,8 @@
                 >
                     <template #icon><SearchIcon /></template>
                 </ff-text-input>
-                <ul v-if="filteredApplications.length > 0" class="ff-applications-list" data-el="applications-list">
+                <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+                <ul v-if="filteredApplications.length > 0" class="ff-applications-list mb-14" data-el="applications-list">
                     <li v-for="application in filteredApplications" :key="application.id" data-el="application-item">
                         <ApplicationListItem
                             :application="application"

frontend/src/pages/team/Library/TeamLibrary.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="ff-team-library">
+    <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+    <div class="ff-team-library mb-14">
         <div class="breadcrumbs-wrapper">
             <div :class="{'ff-breadcrumbs': true, 'disable-last': !viewingFile}">
                 <span v-for="(crumb, $index) in breadcrumbs" :key="$index" class="flex items-center">

frontend/src/pages/team/Members/General.vue

@@ -1,7 +1,8 @@
 <template>
     <FeatureUnavailableToTeam v-if="teamUserLimitReached" fullMessage="You have reached the user limit for this team." class="mt-0" />
     <ff-loading v-if="loading" message="Loading Team..." />
-    <form v-else class="mb-8">
+    <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+    <form v-else class="mb-14">
         <div class="text-right" />
         <ff-data-table data-el="members-table" :columns="userColumns" :rows="users" :show-search="true" search-placeholder="Search Team Members..." :search-fields="['name', 'username', 'role']">
             <template v-if="hasPermission('team:user:invite')" #actions>

frontend/src/stylesheets/common.scss

@@ -181,4 +181,12 @@ label {
         border: none;
         border-radius: 0;
     }
-}
+}
+
+div#hubspot-messages-iframe-container {
+    max-width: 80px;
+    max-height: 80px;
+    width: 80px;
+    height: 80px;
+    background-color: #2233ee55;
+}