diff --git a/dashboard/src/components/ApiTokens.vue b/dashboard/src/components/ApiTokens.vue
index 70980ce0b..e07514fb0 100644
--- a/dashboard/src/components/ApiTokens.vue
+++ b/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>
diff --git a/dashboard/src/components/AppPasswords.vue b/dashboard/src/components/AppPasswords.vue
index a178a3c18..b3fa2cbef 100644
--- a/dashboard/src/components/AppPasswords.vue
+++ b/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>
diff --git a/dashboard/src/views/UserDirectoryLdapServerView.vue b/dashboard/src/views/UserDirectoryLdapServerView.vue
index 192c8af10..3e450a85c 100644
--- a/dashboard/src/views/UserDirectoryLdapServerView.vue
+++ b/dashboard/src/views/UserDirectoryLdapServerView.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, onMounted, computed } from 'vue';
-import { Button, FormGroup, Checkbox, PasswordInput, TextInput } from '@cloudron/pankow';
+import { Button, FormGroup, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
 import { copyToClipboard } from '@cloudron/pankow/utils';
 import Section from '../components/Section.vue';
 import DomainsModel from '../models/DomainsModel.js';
@@ -88,10 +88,10 @@ onMounted(async () => {
 
           <FormGroup>
             <label for="ldapUrlInput">{{ $t('users.exposedLdap.secret.url') }}</label>
-            <div class="ldap-url-container">
-              <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly />
+            <InputGroup>
+              <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly style="flex-grow: 1;"/>
               <Button tool @click="onCopyToClipboard(ldapUrl)" icon="fa fa-clipboard" />
-            </div>
+            </InputGroup>
             <p class="text-small text-warning" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }} </p>
           </FormGroup>
 
@@ -117,17 +117,3 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
-
-<style scoped>
-
-.ldap-url-container {
-  display: flex;
-  width: 100%;
-  gap: 5px;
-}
-
-.ldap-url-container input {
-  width: 100%;
-}
-
-</style>