Use the InputGroup pattern instead

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>