feat: improve summary review layout

app/static/styles.css

@@ -393,6 +393,14 @@ textarea:focus {
   line-height: 1.45;
 }
 
+.summary-preview {
+  display: -webkit-box;
+  max-height: 4.35em;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 .summary-full {
   max-width: min(720px, 72vw);
   margin-top: 8px;
@@ -560,6 +568,7 @@ td {
 .record-actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
@@ -592,6 +601,25 @@ td {
   font-weight: 700;
 }
 
+.review-tag {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  min-height: 22px;
+  margin: 0 0 6px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #e0f2fe;
+  color: #075985;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.review-tag.history {
+  background: #fef0c7;
+  color: var(--warn);
+}
+
 .note-cell {
   color: var(--muted);
   white-space: normal;
@@ -638,6 +666,126 @@ td {
   color: #475467;
 }
 
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(16, 24, 40, 0.38);
+}
+
+.drawer-backdrop[hidden] {
+  display: none;
+}
+
+.summary-review-drawer {
+  display: flex;
+  flex-direction: column;
+  width: min(720px, 100%);
+  max-height: 100vh;
+  border-left: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: -20px 0 48px rgba(16, 24, 40, 0.2);
+}
+
+.drawer-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.drawer-head h2 {
+  margin: 0 0 6px;
+}
+
+.drawer-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.drawer-content {
+  display: grid;
+  gap: 14px;
+  padding: 18px 20px;
+  overflow: auto;
+}
+
+.drawer-section {
+  display: grid;
+  gap: 7px;
+}
+
+.drawer-label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.drawer-text,
+.drawer-body {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: #344054;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.drawer-body {
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #fafbfc;
+}
+
+.drawer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--line);
+  background: #fff;
+}
+
+.drawer-actions button {
+  min-height: 38px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.drawer-actions .secondary-button {
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--text);
+}
+
+.drawer-actions button:hover {
+  background: var(--accent-strong);
+}
+
+.drawer-actions .secondary-button:hover {
+  border-color: var(--accent);
+  background: #fff;
+  color: var(--accent-strong);
+}
+
+.drawer-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -851,6 +999,24 @@ td {
     width: 100%;
   }
 
+  .drawer-backdrop {
+    padding-left: 0;
+  }
+
+  .summary-review-drawer {
+    width: 100%;
+  }
+
+  .drawer-head,
+  .drawer-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .drawer-actions button {
+    width: 100%;
+  }
+
   .inline-account-head {
     align-items: flex-start;
     flex-direction: column;