jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-17 14:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Center content on mobile

Browse Source
This commit is contained in:
Paul Bottein 2025-07-10 18:49:05 +02:00
parent 341e63e878
commit 082f1ca55e
No known key found for this signature in database
1 changed files with 80 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/dialogs/more-info/components/voice/ha-more-info-view-toggle-group.ts
View File

@ -117,6 +117,7 @@ class HaMoreInfoViewToggleGroup extends LitElement {
.stateObj=${groupStateObj}
.stateOverride=${formattedGroupState}
></ha-more-info-state-header>
<div class="main">
<ha-control-button-group vertical>
<ha-control-button
vertical
@ -163,7 +164,14 @@ class HaMoreInfoViewToggleGroup extends LitElement {
</p>
</ha-control-button>
</ha-control-button-group>
<hui-section .config=${sectionConfig} .hass=${this.hass}></hui-section>
</div>
<div class="entities">
<hui-section
.config=${sectionConfig}
.hass=${this.hass}
></hui-section>
</div>
</div>
`;
}
@ -206,18 +214,33 @@ class HaMoreInfoViewToggleGroup extends LitElement {
static styles = [
css`
.content {
padding: 24px;
padding-bottom: max(var(--safe-area-inset-bottom), 24px);
:host {
display: flex;
flex: 1;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: 24px;
}
ha-more-info-state-header {
margin-top: 24px;
}
.main {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
ha-control-button-group {
--control-button-group-spacing: 12px;
--control-button-group-thickness: 130px;
margin-bottom: 32px;
}
ha-control-button {
--control-button-border-radius: 16px;
@ -228,6 +251,13 @@ class HaMoreInfoViewToggleGroup extends LitElement {
ha-control-button p {
margin: 0;
}
.entities {
box-sizing: border-box;
width: 100%;
background-color: var(--primary-background-color);
padding: 12px;
padding-bottom: max(var(--safe-area-inset-bottom), 12px);
}
hui-section {
width: 100%;
}