Use ClipboardAction for inline text elements

dashboard/src/components/SftpInfoDialog.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, Button, ClipboardButton } from '@cloudron/pankow';
+import { Dialog, ClipboardAction } from '@cloudron/pankow';
 import DashboardModel from '../models/DashboardModel.js';
 import DomainsModel from '../models/DomainsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
@@ -54,17 +54,17 @@ defineExpose({
 
     <div class="info-row">
       <div class="info-label">{{ $t('app.accessControl.sftp.server') }}</div>
-      <div class="info-value">{{ adminFqdn }} <ClipboardButton plain :value="adminFqdn" /></div>
+      <div class="info-value">{{ adminFqdn }} <ClipboardAction plain :value="adminFqdn" /></div>
     </div>
 
     <div class="info-row">
       <div class="info-label">{{ $t('app.accessControl.sftp.port') }}</div>
-      <div class="info-value">222 <ClipboardButton plain :value="222" /></div>
+      <div class="info-value">222 <ClipboardAction plain :value="222" /></div>
     </div>
 
     <div class="info-row">
       <div class="info-label">{{ $t('app.accessControl.sftp.username') }}</div>
-      <div class="info-value">{{ username }}@{{ fqdn }} <ClipboardButton plain :value="`${username}@${fqdn}`" /></div>
+      <div class="info-value">{{ username }}@{{ fqdn }} <ClipboardAction plain :value="`${username}@${fqdn}`" /></div>
     </div>
   </Dialog>
 </template>

dashboard/src/views/BackupListView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, ProgressBar, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
+import { Button, ClipboardAction, Menu, ProgressBar, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
 import { prettyLongDate, copyToClipboard, prettyFileSize } from '@cloudron/pankow/utils';
 import { TASK_TYPES } from '../constants.js';
 import Section from  '../components/Section.vue';
@@ -365,8 +365,12 @@ onMounted(async () => {
         </div>
         <div class="info-row">
           <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-          <div class="info-value" style="cursor: copy;" @click="onCopyToClipboard(infoBackup.remotePath)">{{ infoBackup.remotePath }}</div>
-          <div style="cursor: copy; padding-left: 6px;" @click="onCopyToClipboard(infoBackup.remotePath)"><i class="fa fa-clipboard"></i></div>
+          <div class="info-value">
+            <div>
+              {{ infoBackup.remotePath }}
+              <ClipboardAction plain :value="infoBackup.remotePath"/>
+            </div>
+          </div>
         </div>
         <div class="info-row">
           <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>