created_at swagger

frontend/src/styles.css

@@ -665,37 +665,13 @@ button.danger:hover:not([disabled]) {
 
 .preview-workspace {
   flex: 1;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 30em) minmax(0, 1fr);
   gap: 1.5rem;
   min-height: 0;
   padding: 1rem 1.5rem;
 }
 
-.preview-workspace__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.75rem 1.5rem 0;
-}
-
-.preview-workspace__meta {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.preview-workspace__meta h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.preview-workspace__meta .meta {
-  display: block;
-  font-size: 0.8rem;
-  color: var(--muted);
-}
-
 .document-drag-preview {
   position: fixed;
   pointer-events: none;
@@ -794,75 +770,84 @@ button.danger:hover:not([disabled]) {
   pointer-events: none;
 }
 
-.preview-workspace__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.preview-workspace__sidebar {
-  flex: 0 0 20em;
+.preview-workspace__details {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  max-width: 100%;
-  overflow: auto;
+  gap: 1.5rem;
+  overflow-y: auto;
+  min-height: 0;
 }
 
-.preview-workspace__info {
+.preview-section {
   background: var(--surface-subtle);
-  padding: 1rem;
   box-shadow: inset 0 0 0 1px var(--outline-subtle);
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-.preview-workspace__summary {
+.preview-section__title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.preview-section__list {
   margin: 0;
   padding: 0;
   list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.75rem 1.25rem;
 }
 
-.preview-workspace__summary-row {
+.preview-section__item {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.preview-workspace__summary-row dt {
+.preview-section__item dt {
   font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
   color: var(--muted);
 }
 
-.preview-workspace__summary-row dd {
+.preview-section__item dd {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 500;
-}
-
-.preview-workspace__metadata {
-  background: var(--surface-subtle);
-  padding: 1rem;
-  box-shadow: inset 0 0 0 1px var(--outline-subtle);
-  font-size: 0.85rem;
-  overflow: auto;
-  max-height: 40vh;
-}
-
-.preview-workspace__metadata h4 {
-  margin: 0 0 0.5rem;
-  font-size: 0.9rem;
-}
-
-.preview-workspace__metadata pre {
-  margin: 0;
-  white-space: pre-wrap;
   word-break: break-word;
 }
 
+.preview-section__placeholder {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.preview-section__payload {
+  font-size: 0.85rem;
+}
+
+.preview-section__payload summary {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--accent-strong, var(--accent));
+}
+
+.preview-section__payload pre {
+  margin: 0.75rem 0 0;
+  padding: 0.75rem;
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--outline-subtle);
+  border-radius: 6px;
+  max-height: 280px;
+  overflow: auto;
+  font-size: 0.8rem;
+}
+
 .preview-workspace__viewer {
   flex: 1;
   min-width: 0;