Skip to content

Commit 8cf0d8d

Browse files
timmo001timmo001
authored
Safe area: devtools (#26969)
* Remove extra padding * Remove extra padding * Remove extra padding * Fixes * use change from #26971 * Remove * Remove * Remove * Remove * Restore for future change * Fix
1 parent 61c16ce commit 8cf0d8d

File tree

8 files changed

+33
-38
lines changed

8 files changed

+33
-38
lines changed

‎src/panels/developer-tools/action/developer-tools-action.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -612,19 +612,11 @@ class HaPanelDevAction extends LitElement {
612612
css`
613613
.content {
614614
padding: 16px;
615-
padding: max(16px, var(--safe-area-inset-top))
616-
max(16px, var(--safe-area-inset-right))
617-
max(16px, var(--safe-area-inset-bottom))
618-
max(16px, var(--safe-area-inset-left));
619615
max-width: 1200px;
620616
margin: auto;
621617
}
622618
.button-row {
623619
padding: 8px 16px;
624-
padding: max(8px, var(--safe-area-inset-top))
625-
max(16px, var(--safe-area-inset-right))
626-
max(8px, var(--safe-area-inset-bottom))
627-
max(16px, var(--safe-area-inset-left));
628620
border-top: 1px solid var(--divider-color);
629621
border-bottom: 1px solid var(--divider-color);
630622
background: var(--card-background-color);

‎src/panels/developer-tools/assist/developer-tools-assist.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -241,10 +241,6 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
241241
css`
242242
.content {
243243
padding: 28px 20px 16px;
244-
padding: max(28px, calc(12px + var(--safe-area-inset-top)))
245-
max(20px, calc(4px + var(--safe-area-inset-right)))
246-
max(16px, var(--safe-area-inset-bottom))
247-
max(20px, calc(4px + var(--safe-area-inset-left)));
248244
max-width: 1040px;
249245
margin: 0 auto;
250246
}

‎src/panels/developer-tools/event/developer-tools-event.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,10 +148,6 @@ class HaPanelDevEvent extends LitElement {
148148
.content {
149149
gap: 16px;
150150
padding: 16px;
151-
padding: max(16px, var(--safe-area-inset-top))
152-
max(16px, var(--safe-area-inset-right))
153-
max(16px, var(--safe-area-inset-bottom))
154-
max(16px, var(--safe-area-inset-left));
155151
max-width: 1200px;
156152
margin: auto;
157153
}

‎src/panels/developer-tools/ha-panel-developer-tools.ts‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class PanelDeveloperTools extends LitElement {
2020

2121
@property({ attribute: false }) public route!: Route;
2222

23-
@property({ type: Boolean }) public narrow = false;
23+
@property({ type: Boolean, reflect: true }) public narrow = false;
2424

2525
protected firstUpdated(changedProps) {
2626
super.firstUpdated(changedProps);
@@ -148,15 +148,29 @@ class PanelDeveloperTools extends LitElement {
148148
top: 0;
149149
z-index: 4;
150150
background-color: var(--app-header-background-color);
151-
width: var(--mdc-top-app-bar-width, 100%);
151+
width: calc(
152+
var(--mdc-top-app-bar-width, 100%) - var(
153+
--safe-area-inset-right,
154+
0px
155+
)
156+
);
152157
padding-top: var(--safe-area-inset-top);
153-
padding-left: var(--safe-area-inset-left);
154158
padding-right: var(--safe-area-inset-right);
155159
color: var(--app-header-text-color, white);
156160
border-bottom: var(--app-header-border-bottom, none);
157161
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
158162
backdrop-filter: var(--app-header-backdrop-filter, none);
159163
}
164+
:host([narrow]) .header {
165+
width: calc(
166+
var(--mdc-top-app-bar-width, 100%) - var(
167+
--safe-area-inset-left,
168+
0px
169+
) - var(--safe-area-inset-right, 0px)
170+
);
171+
padding-left: var(--safe-area-inset-left);
172+
}
173+
160174
.toolbar {
161175
height: var(--header-height);
162176
display: flex;
@@ -166,10 +180,8 @@ class PanelDeveloperTools extends LitElement {
166180
font-weight: var(--ha-font-weight-normal);
167181
box-sizing: border-box;
168182
}
169-
@media (max-width: 599px) {
170-
.toolbar {
171-
padding: 4px;
172-
}
183+
:host([narrow]) .toolbar {
184+
padding: 4px;
173185
}
174186
.main-title {
175187
margin: var(--margin-title);
@@ -179,11 +191,21 @@ class PanelDeveloperTools extends LitElement {
179191
developer-tools-router {
180192
display: block;
181193
padding-top: calc(
182-
var(--header-height) + 48px + var(--safe-area-inset-top)
194+
var(--header-height) + 52px + var(--safe-area-inset-top, 0px)
183195
);
184-
padding-bottom: calc(var(--safe-area-inset-bottom));
196+
padding-bottom: var(--safe-area-inset-bottom);
197+
padding-right: var(--safe-area-inset-right);
185198
flex: 1 1 100%;
186-
max-width: 100%;
199+
max-width: calc(100% - var(--safe-area-inset-right, 0px));
200+
}
201+
:host([narrow]) developer-tools-router {
202+
padding-left: var(--safe-area-inset-left);
203+
max-width: calc(
204+
100% - var(--safe-area-inset-left, 0px) - var(
205+
--safe-area-inset-right,
206+
0px
207+
)
208+
);
187209
}
188210
ha-tab-group {
189211
--ha-tab-active-text-color: var(--app-header-text-color, white);

‎src/panels/developer-tools/state/developer-tools-state.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -508,10 +508,6 @@ class HaPanelDevState extends LitElement {
508508
-moz-user-select: initial;
509509
display: block;
510510
padding: 16px;
511-
padding: max(16px, var(--safe-area-inset-top))
512-
max(16px, var(--safe-area-inset-right))
513-
max(16px, var(--safe-area-inset-bottom))
514-
max(16px, var(--safe-area-inset-left));
515511
}
516512
517513
:host search-input {

‎src/panels/developer-tools/statistics/developer-tools-statistics.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -714,6 +714,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
714714
height: 100%;
715715
display: flex;
716716
flex-direction: column;
717+
gap: 8px;
717718
}
718719
ha-data-table {
719720
width: 100%;

‎src/panels/developer-tools/template/developer-tools-template.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -276,10 +276,6 @@ ${type === "object"
276276
.content {
277277
gap: 16px;
278278
padding: 16px;
279-
padding: max(16px, var(--safe-area-inset-top))
280-
max(16px, var(--safe-area-inset-right))
281-
max(16px, var(--safe-area-inset-bottom))
282-
max(16px, var(--safe-area-inset-left));
283279
}
284280
285281
.content.horizontal {

‎src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -252,10 +252,6 @@ export class DeveloperYamlConfig extends LitElement {
252252
253253
.content {
254254
padding: 28px 20px 16px;
255-
padding: max(28px, calc(12px + var(--safe-area-inset-top)))
256-
max(20px, calc(4px + var(--safe-area-inset-right)))
257-
max(16px, var(--safe-area-inset-bottom))
258-
max(20px, calc(4px + var(--safe-area-inset-left)));
259255
max-width: 1040px;
260256
margin: 0 auto;
261257
}

0 commit comments

Comments
 (0)