[PLA-1671] fix settings api token copy (#84)

Author: zlayine

resources/js/components/CollapseCard.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bg-white shadow rounded-lg">
         <div class="flex divide-x divide-gray-200 transition-all" :class="{ 'border-b border-gray-200': open }">
-            <div class="flex justify-between px-4 py-5 flex-1" @click="toggleCard">
+            <div class="flex justify-between px-4 py-5 flex-1 cursor-pointer" @click="toggleCard">
                 <div class="inline-flex">
                     <label>{{ title }}</label>
                     <slot name="icon" />
@@ -22,9 +22,9 @@
         <transition
             enter-active-class="duration-300"
             enter-from-class="transform opacity-0 max-h-0 delay-150"
-            enter-to-class="opacity-100 max-h-[300px]"
+            enter-to-class="opacity-100 max-h-[600px]"
             leave-active-class="duration-300"
-            leave-from-class="opacity-100 max-h-[300px]"
+            leave-from-class="opacity-100 max-h-[600px]"
             leave-to-class="transform opacity-0 max-h-0"
         >
             <slot v-if="open" />

resources/js/components/CopyTextIcon.vue

@@ -1,5 +1,8 @@
 <template>
-    <ClipboardIcon class="inline-block ml-1 mb-1 w-4 h-4 cursor-pointer hover:text-primary" @click="copyText" />
+    <div @click="copyText">
+        <slot />
+        <ClipboardIcon class="inline-block ml-1 my-auto w-4 h-4 cursor-pointer hover:text-primary flex-shrink-0" />
+    </div>
 </template>
 
 <script setup lang="ts">

resources/js/components/pages/SettingsApiTokens.vue

@@ -34,21 +34,33 @@
                 v-for="token in tokens"
                 :key="token.name"
             >
-                <div class="flex items-center">
+                <div class="flex-1 truncate flex items-center">
                     <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
                     <span class="text-gray-900 mr-4">{{ token.name }}</span>
-                    <span class="text-gray-400 text-sm mt-1">
-                        {{
-                            shortString(token.plainTextToken?.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0)) ??
-                            '*******'
-                        }}
+                    <span class="text-gray-400 text-sm mt-1 truncate">
+                        <span v-if="!token.plainTextToken">
+                            {{ '*******' }}
+                        </span>
                         <CopyTextIcon
                             v-if="token.plainTextToken"
+                            ref="copyIconRef"
+                            class="cursor-pointer flex mr-4"
                             :text="token.plainTextToken.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0)"
-                        />
+                        >
+                            <span class="truncate">
+                                {{ token.plainTextToken?.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0) }}
+                            </span>
+                        </CopyTextIcon>
                     </span>
                 </div>
-                <Btn :dusk="`btn__revoke-api-${token.name}`" error @click="confirmRevoke(token.name)"> Revoke </Btn>
+                <Btn
+                    class="flex-shrink-0"
+                    :dusk="`btn__revoke-api-${token.name}`"
+                    error
+                    @click="confirmRevoke(token.name)"
+                >
+                    Revoke
+                </Btn>
             </div>
         </div>
 
@@ -64,7 +76,7 @@
 
 <script setup lang="ts">
 import { KeyIcon } from '@heroicons/vue/24/outline';
-import { shortString, snackbarErrors } from '~/util';
+import { snackbarErrors } from '~/util';
 import CopyTextIcon from '../CopyTextIcon.vue';
 import { computed, ref, watch } from 'vue';
 import { useAppStore } from '~/store';