new classification ui

web/src/styles.css

@@ -1997,24 +1997,38 @@ footer span:first-child {
 .callback-details code {
   font-size: 10px;
 }
-.bank-select {
+.combo {
   position: relative;
 }
-.bank-select > input {
+.combo > input {
   width: 100%;
   padding-right: 40px;
+  border: 1px solid #dbe2ea;
+  border-radius: 5px;
+  min-height: 39px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 11px;
+  min-width: 0;
+  color: #33445a;
+  background: #fff;
+  font-weight: 400;
 }
-.bank-selected-logo {
+.combo-adornment {
   position: absolute;
   right: 11px;
   top: 50%;
   transform: translateY(-50%);
+  pointer-events: none;
+  display: flex;
+}
+.combo-adornment img,
+.combo-adornment svg {
   width: 22px;
   height: 22px;
   object-fit: contain;
-  pointer-events: none;
 }
-.bank-options {
+.combo-options {
   position: absolute;
   z-index: 30;
   top: calc(100% + 4px);
@@ -2030,7 +2044,7 @@ footer span:first-child {
   max-height: 264px;
   overflow-y: auto;
 }
-.bank-option {
+.combo-option {
   display: flex;
   width: 100%;
   align-items: center;
@@ -2044,23 +2058,73 @@ footer span:first-child {
   font-size: 13px;
   color: inherit;
 }
-.bank-option:hover,
-.bank-option[aria-selected="true"] {
+.combo-option:hover,
+.combo-option[aria-selected="true"] {
   background: #f0f7f4;
 }
-.bank-option img,
-.bank-option svg {
+.combo-option img,
+.combo-option svg {
   width: 22px;
   height: 22px;
   object-fit: contain;
   flex: none;
   color: var(--muted);
 }
-.bank-empty {
+.combo-empty {
   padding: 8px 10px;
   color: var(--muted);
   font-size: 12px;
 }
+/* The proposed side of a review row is editable in place: compact combobox
+   inputs so a correction fits the diff card, removable chips for tags. */
+.diff-value .combo > input {
+  min-height: 31px;
+  padding: 6px 24px 6px 9px;
+  font-size: 12px;
+}
+.diff-value .combo-option {
+  font-size: 12px;
+  padding: 6px 9px;
+}
+.diff-edit-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 22px;
+}
+.diff-edit-head .button {
+  padding: 2px 8px;
+  font-size: 10px;
+}
+.tag-edit {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+.tag-edit .combo {
+  flex: 1;
+  min-width: 130px;
+}
+.tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 1px solid #cfe4da;
+  background: #fff;
+  color: #2c6d57;
+  border-radius: 20px;
+  padding: 3px 5px 3px 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.tag-chip svg {
+  color: #7fa295;
+}
+.tag-chip:hover svg {
+  color: var(--danger);
+}
 .date-select {
   position: relative;
 }