v0.12.0-hotfix2

2026-09-03 22:28:46 +02:00
parent 97fff976fe
commit 39f50eba2e
5 changed files with 241 additions and 26 deletions
@@ -9586,3 +9586,208 @@ body.chart-fullscreen-open::before {
    grid-template-columns: 1fr;
  }
 }
+
+/* Mobile UX correction pass: explicit left alignment, compact Flow fit control, natural chart fullscreen. */
+@media (max-width: 700px) {
+  #controlPlanSection .dashboard-section-head.compact-head {
+    display: block;
+    width: 100%;
+    margin-bottom: 12px;
+    text-align: left;
+  }
+
+  #controlPlanSection .dashboard-section-head.compact-head > div:first-child {
+    width: 100%;
+    min-width: 0;
+    text-align: left;
+  }
+
+  #controlPlanSection .dashboard-section-head.compact-head .eyebrow,
+  #controlPlanSection .dashboard-section-head.compact-head h2 {
+    text-align: left;
+  }
+}
+
+@media (max-width: 900px) {
+  .flow-workspace-toolbar {
+    gap: 6px;
+    padding-inline: 7px;
+  }
+
+  .flow-workspace-primary-actions {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .flow-add-block-button {
+    flex: 1 1 auto;
+    width: auto;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .flow-zoom-controls {
+    flex: 0 0 auto;
+    gap: 4px;
+  }
+
+  .flow-zoom-controls > span {
+    display: none;
+  }
+
+  .flow-fit-button {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 36px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    min-height: 36px;
+    padding: 0;
+    overflow: hidden;
+    font-size: 0 !important;
+    line-height: 1;
+  }
+
+  .flow-fit-button::before {
+    content: "⤢";
+    display: block;
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+
+@media (orientation: landscape) and (max-height: 700px) {
+  .flow-workspace-toolbar {
+    gap: 6px;
+    padding-inline: 7px;
+  }
+
+  .flow-workspace-primary-actions {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .flow-add-block-button {
+    flex: 1 1 auto;
+    width: auto;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .flow-zoom-controls {
+    flex: 0 0 auto;
+    gap: 4px;
+  }
+
+  .flow-zoom-controls > span {
+    display: none;
+  }
+
+  .flow-fit-button {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 36px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    min-height: 36px;
+    padding: 0;
+    overflow: hidden;
+    font-size: 0 !important;
+    line-height: 1;
+  }
+
+  .flow-fit-button::before {
+    content: "⤢";
+    display: block;
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+
+@media (max-width: 760px) {
+  .history-chart-card.chart-fullscreen-fallback {
+    width: calc(100vw - 8px);
+    height: calc(100dvh - 8px);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    border-radius: 12px;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .chart-title-row {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .chart-title-row h3 {
+    font-size: 16px;
+    line-height: 1.25;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .chart-wrap {
+    flex: 0 0 auto;
+    width: 100%;
+    height: clamp(280px, 45dvh, 430px);
+    min-height: 0;
+    max-height: 430px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .legend {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    gap: 5px;
+    width: 100%;
+    max-height: 42px;
+    margin: 0;
+    padding-bottom: 2px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    overscroll-behavior-inline: contain;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .legend::-webkit-scrollbar {
+    display: none;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .legend-item {
+    flex: 0 0 auto;
+    min-height: 32px;
+    padding: 4px 7px;
+    white-space: nowrap;
+  }
+}
+
+/* In phone landscape there is enough width: keep the full Fit label instead of clipping it. */
+@media (orientation: landscape) and (max-height: 700px) and (min-width: 500px) {
+  .flow-fit-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-basis: auto;
+    width: auto;
+    min-width: 78px;
+    padding: 0 10px;
+    font-size: .75rem !important;
+    white-space: nowrap;
+  }
+
+  .flow-fit-button::before {
+    display: none;
+    content: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .history-chart-card.chart-fullscreen-fallback .chart-wrap {
+    height: clamp(260px, 38dvh, 360px);
+    max-height: 360px;
+  }
+}