fix(dashboard): repair desktop modal widths and NodesView CSS regressions
- Move misclassified .mesh-topology, .connect-node, .nodes-view-topology, .node-status-indicator, and pulse-warning keyframe from AgentReflectionsTab.css to NodesView.css; relocate node-related mobile @media rules from SettingsSyncLog.css so NodesView renders standalone
- Add missing CSS import on GitManagerModal so its .gm-* styles load without depending on ScriptsModal being mounted
- Bump desktop max-widths for FileBrowser, Terminal, GitManager, GitHubImport, and WorkflowStepManager modals; raise selector specificity to .modal.X so the base .modal { width: 480px } can't win the cascade
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
@@ -287,266 +287,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Mesh Topology ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.mesh-topology {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
min-height: calc(var(--space-2xl) * 6.25);
|
||||
padding: var(--space-md);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.mesh-topology__svg {
|
||||
width: 100%;
|
||||
max-width: calc(var(--space-2xl) * 12.5);
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.mesh-topology__node {
|
||||
transition: filter var(--transition-fast);
|
||||
}
|
||||
|
||||
.mesh-topology__node:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.mesh-topology__node-circle {
|
||||
stroke: var(--border);
|
||||
stroke-width: calc(var(--space-xs) / 2);
|
||||
transition: fill var(--transition-fast);
|
||||
}
|
||||
|
||||
.mesh-topology__node-label {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
||||
fill: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mesh-topology__node-type-badge {
|
||||
fill: color-mix(in srgb, var(--surface) 75%, var(--bg));
|
||||
stroke: var(--border);
|
||||
stroke-width: calc(var(--space-xs) / 4);
|
||||
}
|
||||
|
||||
.mesh-topology__node-type-text {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) / 2);
|
||||
font-weight: 700;
|
||||
fill: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.mesh-topology__link {
|
||||
stroke: var(--border);
|
||||
stroke-width: calc((var(--space-xs) * 3) / 8);
|
||||
stroke-dasharray: var(--space-xs), var(--space-xs);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mesh-topology__legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.mesh-topology__legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.mesh-topology__notice {
|
||||
margin: var(--space-md) 0 0;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.mesh-topology__legend-dot {
|
||||
width: calc(var(--space-sm) + var(--space-xs) / 2);
|
||||
height: calc(var(--space-sm) + var(--space-xs) / 2);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.mesh-topology--empty {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mesh-topology__empty-state {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: calc(var(--space-md) + var(--space-xs) / 2);
|
||||
}
|
||||
|
||||
/* ── Connect Node Modal ──────────────────────────────────────────────────────── */
|
||||
|
||||
.connect-node-modal {
|
||||
width: min(calc(var(--space-lg) * 30), calc(100vw - (var(--space-lg) * 2)));
|
||||
}
|
||||
|
||||
.connect-node-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.connect-node-form .form-group {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.connect-node-form .form-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.connect-node-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.connect-node-field__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.connect-node-field__input[aria-invalid="true"] {
|
||||
border-color: var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 5%, var(--surface));
|
||||
}
|
||||
|
||||
.connect-node-field__input[aria-invalid="true"]:focus-visible {
|
||||
border-color: var(--color-error);
|
||||
box-shadow: var(--glow-danger);
|
||||
}
|
||||
|
||||
.connect-node-url-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: color-mix(in srgb, var(--surface) 50%, var(--bg));
|
||||
border-radius: var(--radius-sm);
|
||||
border-left: var(--space-xs) solid var(--accent);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.connect-node-url-preview-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.connect-node-url-preview code {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.connect-node-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--modal-padding);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── Nodes View ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.nodes-view-topology {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.nodes-view-section-title {
|
||||
font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0 0 var(--space-sm);
|
||||
}
|
||||
|
||||
/* ── Node Status Indicator ──────────────────────────────────────────────────── */
|
||||
|
||||
.nodes-view .node-status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.625);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator--local {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator--remote {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot {
|
||||
width: var(--space-sm);
|
||||
height: var(--space-sm);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--online {
|
||||
background: var(--color-success);
|
||||
box-shadow: var(--glow-success);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--offline {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--error {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--connecting {
|
||||
background: var(--color-warning);
|
||||
animation: pulse-warning 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__spinner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: calc(var(--space-xs) / 2) solid transparent;
|
||||
border-top-color: currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__details {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@keyframes pulse-warning {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
box-shadow: var(--glow-warning);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 calc(var(--space-sm) + var(--space-xs)) var(--color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Budget Progress Bar ────────────────────────────────────────────────────── */
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* === File Browser === */
|
||||
.file-browser-modal {
|
||||
.modal.file-browser-modal {
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
max-width: 1600px;
|
||||
height: 80vh;
|
||||
max-height: calc(100vh - 2 * var(--overlay-padding-top, 10vh));
|
||||
display: flex;
|
||||
@@ -582,9 +582,9 @@
|
||||
|
||||
|
||||
/* === File Browser === */
|
||||
.file-browser-modal {
|
||||
.modal.file-browser-modal {
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
max-width: 1600px;
|
||||
height: 80vh;
|
||||
max-height: calc(100vh - 2 * var(--overlay-padding-top, 10vh));
|
||||
}
|
||||
@@ -664,7 +664,7 @@
|
||||
/* ChangesDiffModal — two-panel diff browser */
|
||||
.changes-diff-modal {
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
max-width: 1600px;
|
||||
height: 80vh;
|
||||
max-height: calc(100vh - 2 * var(--overlay-padding-top, 10vh));
|
||||
display: flex;
|
||||
|
||||
@@ -174,8 +174,8 @@
|
||||
|
||||
/* Wider modal for two-pane layout */
|
||||
.github-import-modal {
|
||||
width: min(900px, calc(100vw - 32px));
|
||||
max-height: min(800px, calc(100vh - 64px));
|
||||
width: min(1400px, calc(100vw - 32px));
|
||||
max-height: min(900px, calc(100vh - 64px));
|
||||
}
|
||||
|
||||
.github-import-modal__header {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import "./ScriptsModal.css";
|
||||
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
||||
import type { Task } from "@fusion/core";
|
||||
import { getErrorMessage } from "@fusion/core";
|
||||
|
||||
@@ -571,3 +571,388 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ── Mesh Topology ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.mesh-topology {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
min-height: calc(var(--space-2xl) * 6.25);
|
||||
padding: var(--space-md);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.mesh-topology__svg {
|
||||
width: 100%;
|
||||
max-width: calc(var(--space-2xl) * 12.5);
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.mesh-topology__node {
|
||||
transition: filter var(--transition-fast);
|
||||
}
|
||||
|
||||
.mesh-topology__node:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.mesh-topology__node-circle {
|
||||
stroke: var(--border);
|
||||
stroke-width: calc(var(--space-xs) / 2);
|
||||
transition: fill var(--transition-fast);
|
||||
}
|
||||
|
||||
.mesh-topology__node-label {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
||||
fill: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mesh-topology__node-type-badge {
|
||||
fill: color-mix(in srgb, var(--surface) 75%, var(--bg));
|
||||
stroke: var(--border);
|
||||
stroke-width: calc(var(--space-xs) / 4);
|
||||
}
|
||||
|
||||
.mesh-topology__node-type-text {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) / 2);
|
||||
font-weight: 700;
|
||||
fill: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.mesh-topology__link {
|
||||
stroke: var(--border);
|
||||
stroke-width: calc((var(--space-xs) * 3) / 8);
|
||||
stroke-dasharray: var(--space-xs), var(--space-xs);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mesh-topology__legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.mesh-topology__legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.mesh-topology__notice {
|
||||
margin: var(--space-md) 0 0;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.mesh-topology__legend-dot {
|
||||
width: calc(var(--space-sm) + var(--space-xs) / 2);
|
||||
height: calc(var(--space-sm) + var(--space-xs) / 2);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.mesh-topology--empty {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mesh-topology__empty-state {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: calc(var(--space-md) + var(--space-xs) / 2);
|
||||
}
|
||||
|
||||
/* ── Connect Node Modal ──────────────────────────────────────────────────────── */
|
||||
|
||||
.connect-node-modal {
|
||||
width: min(calc(var(--space-lg) * 30), calc(100vw - (var(--space-lg) * 2)));
|
||||
}
|
||||
|
||||
.connect-node-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.connect-node-form .form-group {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.connect-node-form .form-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.connect-node-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.connect-node-field__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.connect-node-field__input[aria-invalid="true"] {
|
||||
border-color: var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 5%, var(--surface));
|
||||
}
|
||||
|
||||
.connect-node-field__input[aria-invalid="true"]:focus-visible {
|
||||
border-color: var(--color-error);
|
||||
box-shadow: var(--glow-danger);
|
||||
}
|
||||
|
||||
.connect-node-url-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: color-mix(in srgb, var(--surface) 50%, var(--bg));
|
||||
border-radius: var(--radius-sm);
|
||||
border-left: var(--space-xs) solid var(--accent);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.connect-node-url-preview-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.connect-node-url-preview code {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.connect-node-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--modal-padding);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── Nodes View ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.nodes-view-topology {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.nodes-view-section-title {
|
||||
font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0 0 var(--space-sm);
|
||||
}
|
||||
|
||||
/* ── Node Status Indicator ──────────────────────────────────────────────────── */
|
||||
|
||||
.nodes-view .node-status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.625);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator--local {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator--remote {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot {
|
||||
width: var(--space-sm);
|
||||
height: var(--space-sm);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--online {
|
||||
background: var(--color-success);
|
||||
box-shadow: var(--glow-success);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--offline {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--error {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__dot--connecting {
|
||||
background: var(--color-warning);
|
||||
animation: pulse-warning 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__spinner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: calc(var(--space-xs) / 2) solid transparent;
|
||||
border-top-color: currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nodes-view .node-status-indicator__details {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@keyframes pulse-warning {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
box-shadow: var(--glow-warning);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 calc(var(--space-sm) + var(--space-xs)) var(--color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Nodes View Mobile Responsive ──────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.nodes-view {
|
||||
padding-inline: var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.node-card__metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.node-detail-modal__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.node-detail-modal__field--full {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
/* Add Node Modal mobile */
|
||||
.add-node-modal {
|
||||
width: calc(100vw - (var(--space-md) * 2));
|
||||
}
|
||||
|
||||
.add-node-modal__type-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-node-modal__type-btn {
|
||||
flex: 1;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
.add-node-modal__field input {
|
||||
min-height: calc(var(--space-2xl) + var(--space-md));
|
||||
}
|
||||
|
||||
/* Instant transition on mobile for remote fields */
|
||||
.add-node-modal__remote-fields {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Connect Node Modal mobile */
|
||||
.connect-node-modal {
|
||||
width: calc(100vw - (var(--space-md) * 2));
|
||||
}
|
||||
|
||||
.connect-node-field__input {
|
||||
min-height: calc(var(--space-2xl) + var(--space-md));
|
||||
}
|
||||
|
||||
/* NodesView mobile alignment */
|
||||
.nodes-view-header {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-title h2 {
|
||||
font-size: calc(var(--space-md) + var(--space-xs));
|
||||
}
|
||||
|
||||
.nodes-view-title h2 svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nodes-view-count {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.nodes-view-actions {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nodes-view-close {
|
||||
min-height: calc(var(--space-xl) + var(--space-md));
|
||||
min-width: calc(var(--space-xl) + var(--space-md));
|
||||
}
|
||||
|
||||
.nodes-view-actions .btn {
|
||||
min-height: calc(var(--space-xl) + var(--space-md));
|
||||
}
|
||||
|
||||
.nodes-view-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-stat {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-stat span {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
||||
}
|
||||
|
||||
.nodes-view-stat strong {
|
||||
font-size: calc(var(--space-md) + var(--space-xs) / 2);
|
||||
}
|
||||
|
||||
.nodes-view-empty {
|
||||
padding: var(--space-xl) var(--space-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nodes-view-error {
|
||||
padding: var(--space-md);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.nodes-view-topology {
|
||||
padding: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.nodes-view-section-title {
|
||||
font-size: calc(var(--space-md) + var(--space-xs) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1662,8 +1662,8 @@
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Modal size override - flex layout for sidebar + content */
|
||||
.gm-modal {
|
||||
width: 900px;
|
||||
.modal.gm-modal {
|
||||
width: 1400px;
|
||||
max-width: 95vw;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
|
||||
@@ -176,130 +176,8 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nodes-view {
|
||||
padding-inline: var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.node-card__metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.node-detail-modal__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.settings-sync-conflict-modal__diff-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.node-detail-modal__field--full {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
/* Add Node Modal mobile */
|
||||
.add-node-modal {
|
||||
width: calc(100vw - (var(--space-md) * 2));
|
||||
}
|
||||
|
||||
.add-node-modal__type-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-node-modal__type-btn {
|
||||
flex: 1;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
.add-node-modal__field input {
|
||||
min-height: calc(var(--space-2xl) + var(--space-md));
|
||||
}
|
||||
|
||||
/* Instant transition on mobile for remote fields */
|
||||
.add-node-modal__remote-fields {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Connect Node Modal mobile */
|
||||
.connect-node-modal {
|
||||
width: calc(100vw - (var(--space-md) * 2));
|
||||
}
|
||||
|
||||
.connect-node-field__input {
|
||||
min-height: calc(var(--space-2xl) + var(--space-md));
|
||||
}
|
||||
|
||||
/* NodesView mobile alignment */
|
||||
.nodes-view-header {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-title h2 {
|
||||
font-size: calc(var(--space-md) + var(--space-xs));
|
||||
}
|
||||
|
||||
.nodes-view-title h2 svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nodes-view-count {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs));
|
||||
}
|
||||
|
||||
.nodes-view-actions {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nodes-view-close {
|
||||
min-height: calc(var(--space-xl) + var(--space-md));
|
||||
min-width: calc(var(--space-xl) + var(--space-md));
|
||||
}
|
||||
|
||||
.nodes-view-actions .btn {
|
||||
min-height: calc(var(--space-xl) + var(--space-md));
|
||||
}
|
||||
|
||||
.nodes-view-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-stat {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
|
||||
.nodes-view-stat span {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
||||
}
|
||||
|
||||
.nodes-view-stat strong {
|
||||
font-size: calc(var(--space-md) + var(--space-xs) / 2);
|
||||
}
|
||||
|
||||
.nodes-view-empty {
|
||||
padding: var(--space-xl) var(--space-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nodes-view-error {
|
||||
padding: var(--space-md);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.nodes-view-topology {
|
||||
padding: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.nodes-view-section-title {
|
||||
font-size: calc(var(--space-md) + var(--space-xs) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* === Terminal Modal === */
|
||||
.terminal-modal {
|
||||
.modal.terminal-modal {
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
max-width: 1600px;
|
||||
min-height: 90vh;
|
||||
max-height: 90vh;
|
||||
background: var(--card);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* === Workflow Step Manager Modal === */
|
||||
.workflow-step-manager-modal {
|
||||
width: 560px;
|
||||
.modal.workflow-step-manager-modal {
|
||||
width: min(900px, calc(100vw - 32px));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user