Logbook card: place a gap between an icon/image & a text

[ildar170975]

Proposed change

Add a horizontal gap between an icon/image and a text. Currently w/o this gap a placement of these elements is very tight.

For details - see https://github.com/home-assistant/frontend/issues/13131

Type of change

• [ ] Dependency upgrade
• [ ] Bugfix (non-breaking change which fixes an issue)
• [ ] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [x ] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes https://github.com/home-assistant/frontend/issues/13131
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [ x] The code change is tested and works locally.
• [x ] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

[zsarnett]

https://github.com/home-assistant/frontend/pull/13348/files#diff-fe0260e1d2f2eea8dcb455d644828da865c94f2522881f2abd0a24012f808cc0R615-R619

Try this instead

.narrow .icon-message state-badge {
    margin-left: 0;
    margin-inline-start: 0;
    margin-inline-end: 8px;
    margin-right: 8px;
    direction: var(--direction);
}