Aligning appending v-btn to the right edge of a list embedded in a v-card component

Question

I'm trying to position the button (v-btn component) to appear at the very end of a list item, to be aligned to the right edge of the v-card. At the moment, it appears right after a title specified in v-list-item-title component.

What I tried already, was adding flex, and fluid parameters to v-list and its children, but none of these settings worked as I'd expect.

How to reformat the code below to get the v-btn aligned to the right edge of the list?

<v-card
  class="my-1"
  v-for="(foundPackage, n) in foundPackages"
  :key="n">
  <v-list lines="two">
    <v-list-subheader class="text-h6 font-weight-bold">
      {{ foundPackage[0].packages[0].name }}:
      <v-list-item
        v-for="pkg in foundPackage"
        :key="pkg.id"
      >
      <v-list-item-title class="text-subheader-2">{{ pkg.defin }}</v-list-item-title>
      <v-list-item-subtitle>{{ pkg.packages[0].name }}</v-list-item-subtitle>
      <template v-slot:prepend>
        <v-avatar :color="pkg.source.toLowerCase().includes('avail') ? 'blue-darken-2' : 'orange-darken-4'">
          <v-icon>
            {{ pkg.source.toLowerCase().includes('avail') ? 'mdi-compass-outline' : 'mdi-factory' }}
          </v-icon>
        </v-avatar>
      </template>
      <template v-slot:append>
        <v-btn :href="pkg.url">URL</v-btn> <!-- THE BUTTON -->
      </template>
      </v-list-item>
    </v-list-subheader>
  </v-list>
</v-card>

Answer 1

VListItem should naturally use up the full width of the list component, the problem is that you've nested VListItem inside VListSubheader. The subheader only uses as much width as it needs, constraining the width of your VListItem. To correct the issue, move VListItem out from being nested so that it's a direct child of VList.

<v-list lines="two">
  <v-list-subheader class="text-h6 font-weight-bold">
    {{ foundPackage[0].packages[0].name }}:
  </v-list-subheader>
  <v-list-item v-for="pkg in foundPackage" :key="pkg.id">
    ...
  </v-list-item>