From c5fbb73fea2836fa2d83da039c0bf3d12b8fb2de Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 19 Sep 2025 11:31:38 +0200
Subject: [PATCH] Use ClipboardAction for inline text elements

---
 dashboard/src/components/SftpInfoDialog.vue |  8 ++++----
 dashboard/src/views/BackupListView.vue      | 10 +++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/SftpInfoDialog.vue b/dashboard/src/components/SftpInfoDialog.vue
index e821b0d06..67dae1da8 100644
--- a/dashboard/src/components/SftpInfoDialog.vue
+++ b/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>
diff --git a/dashboard/src/views/BackupListView.vue b/dashboard/src/views/BackupListView.vue
index 595871838..af50872fd 100644
--- a/dashboard/src/views/BackupListView.vue
+++ b/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>