v0.12.0-hotfix1

2026-09-03 22:18:32 +02:00
parent 07be4b85d9
commit 97fff976fe
5 changed files with 315 additions and 116 deletions
@@ -9410,4 +9410,179 @@ body.chart-fullscreen-open::before {
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
-}
+}
+
+/* Mobile UX refinements: dashboard headers, control plan, landscape navigation and Flow toolbar. */
+@media (max-width: 700px) {
+  .dashboard-thermostat-section .dashboard-section-head.compact-head {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .dashboard-thermostat-section .dashboard-section-head.compact-head > div:first-child {
+    min-width: 0;
+    text-align: left;
+  }
+
+  .dashboard-thermostat-section .dashboard-section-actions {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+
+  .dashboard-thermostat-section .dashboard-section-actions button {
+    flex: 0 0 auto;
+  }
+
+  #controlPlan.automation-plan-grid {
+    grid-template-columns: 1fr;
+  }
+
+  #controlPlan .plan-card,
+  #controlPlan .plan-card-head,
+  #controlPlan .plan-events,
+  #controlPlan .plan-events li,
+  #controlPlan .plan-events time,
+  #controlPlan .plan-rule-summary {
+    text-align: left;
+  }
+
+  #controlPlan .plan-rules .plan-events li {
+    grid-template-columns: 1fr;
+    gap: 3px;
+  }
+}
+
+#controlPlan .plan-rules .plan-events time {
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+#controlPlan .plan-rules .plan-rule-summary {
+  min-width: 0;
+}
+
+/* Phones in landscape can cross desktop width breakpoints. Keep navigation compact when height is phone-like. */
+@media (orientation: landscape) and (max-height: 640px) and (max-width: 1400px) {
+  body:not(.flow-editor-open) main {
+    width: 100%;
+    max-width: 100%;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-bottom: calc(74px + env(safe-area-inset-bottom));
+  }
+
+  body:not(.flow-editor-open) .desktop-nav-only {
+    display: none !important;
+  }
+
+  body:not(.flow-editor-open) .mobile-nav-only {
+    display: grid !important;
+  }
+
+  body:not(.flow-editor-open) .bottom-nav {
+    top: auto;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    width: 100%;
+    max-width: 100vw;
+    max-height: none;
+    gap: 0;
+    padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
+    overflow: hidden;
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  body:not(.flow-editor-open) .bottom-nav .nav-section-label {
+    display: none !important;
+  }
+
+  body:not(.flow-editor-open) .bottom-nav button {
+    display: grid;
+    place-items: center;
+    gap: 2px;
+    min-height: 44px;
+    padding: 5px 2px;
+    text-align: center;
+  }
+
+  body:not(.flow-editor-open) .bottom-nav button span {
+    display: block;
+    width: auto;
+    font-size: 18px;
+  }
+
+  body:not(.flow-editor-open) .bottom-nav button b {
+    max-width: 100%;
+    font-size: 9px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .flow-workspace-toolbar {
+    gap: 6px;
+    padding-inline: 8px;
+  }
+
+  .flow-workspace-primary-actions {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .flow-add-block-button {
+    min-width: 0;
+    max-width: min(42vw, 160px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .flow-zoom-controls {
+    flex: 0 0 auto;
+    gap: 4px;
+  }
+
+  .flow-zoom-controls > span {
+    display: none;
+  }
+
+  .flow-fit-button {
+    width: 36px;
+    min-width: 36px;
+    min-height: 36px;
+    padding: 0;
+    overflow: hidden;
+    font-size: 0;
+  }
+
+  .flow-fit-button::before {
+    content: "⊡";
+    font-size: 17px;
+    line-height: 1;
+  }
+}
+
+
+#controlPlan .plan-card {
+  text-align: left;
+}
+
+#controlPlan .plan-rules .plan-events li {
+  grid-template-columns: minmax(88px, .85fr) minmax(0, 1.15fr);
+}
+
+@media (max-width: 700px) {
+  #controlPlan .plan-rules .plan-events li {
+    grid-template-columns: 1fr;
+  }
+}