fix: Default advanced-camera-card-icon to display: block (#2737)

- Inspired by @tieskuh and #2734

src/scss/button.scss

@@ -10,9 +10,3 @@ ha-icon-button {
   /* Buttons can always be clicked */
   pointer-events: auto;
 }
-
-ha-icon-button advanced-camera-card-icon {
-  // Inline-level boxes sit on a line of text, where the button label's font
-  // reserves space below the line and pushes the icon off-center.
-  display: block;
-}

src/scss/date-picker.scss

@@ -43,7 +43,6 @@ input {
 }
 
 advanced-camera-card-icon {
-  display: block;
   height: 100%;
   width: 100%;
   position: absolute;

src/scss/icon.scss

@@ -1,5 +1,5 @@
 :host {
-  display: inline-block;
+  display: block;
   width: var(--mdc-icon-size, 24px);
   height: var(--mdc-icon-size, 24px);
 

src/scss/thumbnail-feature.scss

@@ -71,7 +71,6 @@ advanced-camera-card-icon.placeholder {
 }
 
 advanced-camera-card-icon.background {
-  display: block;
   width: 100%;
   height: 100%;
 

tests/components/icon.browser.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { deepQuery } from '../browser/dom';
+import {
+  createTestFrigateEvent,
+  EVENT_TIME_NEWER,
+  mountCardWithFrigate,
+} from '../browser/fake-frigate';
+import { waitForThumbnails } from '../browser/test-utils';
+
+describe('AdvancedCameraCardIcon', () => {
+  it('should be block level so it does not sit on a line of text', async () => {
+    const events = [createTestFrigateEvent('newer', EVENT_TIME_NEWER)];
+    const { card } = await mountCardWithFrigate(events, { view: { default: 'clips' } });
+    await waitForThumbnails(card, events.length);
+
+    // The drawer control is an icon alone in a block container that declares no
+    // display of its own, so what it computes to is the component's own
+    // default.
+    const icon = deepQuery(card.card, 'advanced-camera-card-icon.control');
+    expect(icon).not.toBeNull();
+
+    expect(icon && getComputedStyle(icon).display).toBe('block');
+  });
+});