Popup Card Inconsistencies

[apop880]

I found a couple of formatting issues with the popup card versus a standard more-info card.

1. The gap between the "X" and the card title is smaller than the gap in the standard card. I was able to add the following to the <style> section to correct it, but not sure if there's a more efficient fix:

app-toolbar [main-title] {
  --ha-more-info-app-toolbar-title_-_margin-left: 16px;
  --ha-more-info-app-toolbar-title_-_line-height: 1.3em;
  --ha-more-info-app-toolbar-title_-_max-height: 2.6em;
  --ha-more-info-app-toolbar-title_-_overflow: hidden;
  --ha-more-info-app-toolbar-title_-_display: -webkit-box;
  --ha-more-info-app-toolbar-title_-_-webkit-line-clamp: 2;
  --ha-more-info-app-toolbar-title_-_-webkit-box-orient: vertical;
  --ha-more-info-app-toolbar-title_-_text-overflow: ellipsis;
  margin-left: var(--ha-more-info-app-toolbar-title_-_margin-left);
  line-height: var(--ha-more-info-app-toolbar-title_-_line-height);
  max-height: var(--ha-more-info-app-toolbar-title_-_max-height);
  overflow: var(--ha-more-info-app-toolbar-title_-_overflow);
  display: var(--ha-more-info-app-toolbar-title_-_display);
  -webkit-line-clamp: var(--ha-more-info-app-toolbar-title_-_-webkit-line-clamp);
  -webkit-box-orient: var(--ha-more-info-app-toolbar-title_-_-webkit-box-orient);
  text-overflow: var(--ha-more-info-app-toolbar-title_-_text-overflow);
}

2. On a desktop or tablet, the style of the popup card matches a standard more-info, but on a phone where the popup fills the screen, the header colors don't match a standard card. I applied the following code in the <style> section to fix:

@media all and (max-width: 450px), all and (max-height: 500px) {
  app-toolbar {
      color: var(--text-primary-color);
      background-color: var(--primary-color);
  }
}

3. On a mobile device, the card shows its shadow by default, which is not the behavior on the standard card. I was not able to figure out a way to update card-tools to correct this and resorted to using card-modder, but it would probably be good to match the default behavior of the more-info screen if that's possible.

I'm happy to open a PR if you'd prefer but I figure there are likely better ways to fix these items. My solution was pretty quick and dirty.

[apop880]

Just to add, the issue with the spacing after the X doesn't seem to be entirely fixed by my code above. It is good on a PC now, and it's good in Chrome developer tools if I change to a phone resolution, but it's still not right on my actual phone.