home-assistant
Alignment YAML configuration reloading page
Checklist
- [X] I have updated to the latest available Home Assistant version.
- [X] I have cleared the cache of my browser.
- [X] I have tried a different browser to see if it is related to my browser.
Describe the issue you are experiencing
Alignment of YAML configuration reloading page is a bit strange at low page width (for example on my Android mobile app)
Describe the behavior you expected
Everything left aligned.
Steps to reproduce the issue
...
What version of Home Assistant Core has the issue?
2022.12.8
What was the last working version of Home Assistant Core?
No response
In which browser are you experiencing the issue with?
No response
Which operating system are you using to run this browser?
No response
State of relevant entities
No response
Problem-relevant frontend configuration
No response
Javascript errors shown in your browser console/inspector
No response
Additional information
No response
Chrome + Win10:
iOS Companion App, iPhone 5S (iOS 12.5.x):
iOS Companion App, iPad Air 2 (iOS 15.x):
I managed to reproduce in in Chrome + Win10:
Resizing to a minimum width does not allow to get a narrow window (some "min-width" limitation here), but then I scaled the window (ctrl + mouse wheel) - and then reproduced it.
Resizing to a minimum width does not allow to get a narrow window (some "min-width" limitation here), but then I scaled the window (ctrl + mouse wheel) - and then reproduced it.
Just FYI, if you open up developer tools menu in Chrome or Firefox, they both have a tiny button that looks like a tablet, it puts the website into "Responsive design mode", and you can resize the page down to like 50-100px wide, much smaller than the normal resizing will get you.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
Probably can be "fixed" by adding this to "developer-yaml-config.ts":
@media all and (max-width: 440px) {
.content > *:nth-child(2) .card-actions {
justify-content: center;
}
}
For "narrow" screens it will show all "reload" buttons centered.
Please test someone this fix.
Update: no, this is wrong.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
I found a way to fix it locally: add an external js-file:
customElements.whenDefined('developer-yaml-config').then(() => {
const Panel = customElements.get('developer-yaml-config');
const { html, css } = Panel.prototype;
const newStyle = css`
ha-call-service-button {
--ha-mwc-button-text-align: start;
}
`;
const newStyles = [].concat(Panel.styles, newStyle);
Object.defineProperty(Panel, 'styles', {value: newStyles, configurable: true, enumerable: false});
Object.defineProperty(Panel, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});
customElements.whenDefined('mwc-button').then(() => {
const mwcButton = customElements.get('mwc-button');
const { html, css } = mwcButton.prototype;
const newStyle = css`
.mdc-button {text-align: var(--ha-mwc-button-text-align, center);}
`;
const newStyles = [].concat(mwcButton.styles, newStyle);
Object.defineProperty(mwcButton, 'styles', {value: newStyles, configurable: true, enumerable: false});
Object.defineProperty(mwcButton, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});
Have not found out yet how to add this as PR...
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
Hi, we are a group of computer science students that are planning to fix this issue as part of a course. Perhaps this issue can be assigned to me?
Not fixed, fix got reverted https://github.com/home-assistant/frontend/pull/25377
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
