Use the InputGroup pattern instead

dashboard/src/components/ApiTokens.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
-import { Button, Menu, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput } from '@cloudron/pankow';
+import { Button, Menu, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
 import { copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
 import Section from './Section.vue';
@@ -89,9 +89,9 @@ async function onSubmitAddApiToken(){
   await refreshApiTokens();
 }
 
-function onCopyApiTokenToClipboard(apiToken) {
+function onCopyToClipboard(apiToken) {
   copyToClipboard(apiToken);
-  window.pankow.notify({ type: 'success', text: 'Token copied!' });
+  window.pankow.notify({ type: 'success', text: 'API Token copied!' });
 }
 
 function onReset() {
@@ -165,10 +165,10 @@ onMounted(async () => {
           </div>
           <div v-else>
             <p>{{ $t('profile.createApiToken.description') }}</p>
-            <div class="copy-container">
-              <TextInput v-model="addedToken" readonly/>
-              <Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
-            </div>
+            <InputGroup>
+              <TextInput v-model="addedToken" readonly style="flex-grow: 1;"/>
+              <Button tool @click="onCopyToClipboard(addedToken)" icon="fa fa-clipboard" />
+            </InputGroup>
             <p>{{ $t('profile.createApiToken.copyNow') }}</p>
           </div>
         </Transition>
@@ -205,17 +205,3 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
-
-<style scoped>
-
-.copy-container {
-  display: flex;
-  width: 100%;
-  gap: 5px;
-}
-
-.copy-container input {
-  width: 100%;
-}
-
-</style>

dashboard/src/components/AppPasswords.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Menu, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
 import { prettyLongDate, copyToClipboard } from '@cloudron/pankow/utils';
 import Section from './Section.vue';
 import AppPasswordsModel from '../models/AppPasswordsModel.js';
@@ -191,10 +191,10 @@ onMounted(async () => {
           </div>
           <div v-else>
             <p>{{ $t('profile.createAppPassword.description') }}</p>
-            <div class="copy-container">
-              <TextInput v-model="addedPassword" readonly/>
+            <InputGroup>
+              <TextInput v-model="addedPassword" readonly style="flex-grow: 1;"/>
               <Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
-            </div>
+            </InputGroup>
             <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
           </div>
         </Transition>
@@ -220,17 +220,3 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
-
-<style scoped>
-
-.copy-container {
-  display: flex;
-  width: 100%;
-  gap: 5px;
-}
-
-.copy-container input {
-  width: 100%;
-}
-
-</style>