Applying hide-details causes the component to misalign

[fitzhavey]

As the title says, things misalign when hide-details is given. I'm using this in a custom input with my own label and error messages, so please disregard those.

Without:

<phone-selector
  v-model="internalValue"
  :inputOptions="{ tabindex: 4 }"
  mode="international"
  :valid-characters-only="true"
  :preferredCountries="['GB', 'US', 'AE']"
  outlined dense filled label/>

With:

<phone-selector
  v-model="internalValue"
  :inputOptions="{ tabindex: 4 }"
  mode="international"
  :valid-characters-only="true"
  :preferredCountries="['GB', 'US', 'AE']"
  outlined dense filled label
  hide-details/>

Workaround

It looks like something about the country code is causing it, I'm on version 1.5.3.

It displays ok for me as long as I set the following in the parent's (scoped) css:

.v-text-field__details {
  display: none;
}
.v-input__slot {
  margin-bottom: 0;
}