@zaip-ai/cli 1.3.6 → 1.3.8

package/templates/.agents/dashboard/apps/frontend/src/project-stack-versions.css

@@ -0,0 +1,117 @@
+.project-stack-versions {
+  margin: 0 22px 22px;
+}
+
+.project-stack-versions h3 {
+  margin: 0 0 12px;
+  font-size: 0.9rem;
+}
+
+.project-stack-versions > div {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.project-stack-versions article {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "identity badge"
+    "source source";
+  gap: 7px 12px;
+  align-items: start;
+  min-width: 0;
+  border: 1px solid #dbe4ef;
+  border-radius: 12px;
+  padding: 9px 12px;
+  background: #f8fafc;
+}
+
+.project-stack-version-identity {
+  display: grid;
+  grid-area: identity;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 2px 8px;
+  min-width: 0;
+}
+
+.project-stack-version-identity strong {
+  min-width: 0;
+  color: #334155;
+  font-size: 0.8rem;
+}
+
+.project-stack-version-identity code {
+  min-width: 0;
+  color: #0f172a;
+  font-size: 0.8rem;
+  overflow-wrap: anywhere;
+}
+
+.project-stack-version-identity code + code {
+  grid-column: 2;
+}
+
+.project-stack-versions article small {
+  grid-area: source;
+  min-width: 0;
+  color: #64748b;
+  font-size: 0.68rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.project-stack-versions article span {
+  grid-area: badge;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 3px 6px;
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+.project-stack-versions .is-exact {
+  background: #f0fdf4;
+  color: #166534;
+}
+.project-stack-versions .is-constraint {
+  background: #fff7ed;
+  color: #9a3412;
+}
+.project-stack-versions .is-unavailable {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+@media (max-width: 820px) {
+  .project-stack-versions article {
+    grid-template-areas:
+      "identity"
+      "badge"
+      "source";
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px 10px;
+    align-items: start;
+    padding: 10px 12px;
+  }
+
+  .project-stack-versions > div {
+    grid-template-columns: 1fr;
+  }
+
+  .project-stack-version-identity {
+    grid-template-columns: 1fr;
+  }
+
+  .project-stack-version-identity code + code {
+    grid-column: 1;
+  }
+
+  .project-stack-versions article span {
+    align-self: start;
+  }
+
+  .project-stack-versions article small {
+    text-align: left;
+  }
+}