How to avoid the distortion of a button?

[wsw70]

I wanted to add a round button to a row of components:

<template>
  <div class="row q-my-md">
    <q-btn round color="secondary" icon="autorenew" @click="resetSelectedTags" class="q-mx-md"></q-btn>
    <fieldset class="row q-mx-md">
      <legend>Selected</legend>
      <q-chip
        v-for="(state, tag) in selectedTags"
        v-if="state"
        :key="tag"
        :label="tag"
        :style="{ background: tagToColor(tag) }"
        class="q-my-sm tag text-white"
        @click="updateTagState(tag, !state)"
        clickable
      />
...

The q-btn ended up distorted as if its height was driven by the height of the line:

I get the same effect with a standard (non-round) button:

How can I avoid this?

[metalsadman]

Wrap it in a div.

[wsw70]

Thank you, they are now of the proper size (and aligned to the top of the line, I will see how to fix this as it must be a flex behaviour)

[rstoenescu]

It is indeed a flex behavior. Alternatively you could also set a vertical aligment (row items-center).

[wsw70]

@rstoenescu Thanks. I posted another solution that gives the same quasi-centered alignment (without the div but with an extra class)

[wsw70]

After analyzing @metalsadman answer, I realized that the div is not a flex element and therefore is aligned to the top of the line.

The alternate solution I found is

<q-btn round color="secondary" icon="autorenew" @click="resetSelectedTags" class="q-mx-md flex"></q-btn>

The flex class is

  .flex {
    display: flex;
    align-self: center;
  }

The alignment is not perfect but acceptable: