diff options
| -rw-r--r-- | makima/frontend/src/components/orders/OrderDetail.tsx | 77 |
1 files changed, 37 insertions, 40 deletions
diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx index 9c3ac97..338cc60 100644 --- a/makima/frontend/src/components/orders/OrderDetail.tsx +++ b/makima/frontend/src/components/orders/OrderDetail.tsx @@ -111,8 +111,8 @@ export function OrderDetail({ return ( <div className="flex flex-col h-full overflow-y-auto"> {/* Header */} - <div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]"> - <div className="flex items-center justify-between mb-2"> + <div className="px-4 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]"> + <div className="flex items-center justify-between mb-1"> {editingTitle ? ( <div className="flex-1 flex items-center gap-2 pr-2"> <input @@ -151,54 +151,51 @@ export function OrderDetail({ {order.title} </h2> )} - <div className="flex items-center gap-2 shrink-0"> - <span - className={`text-[10px] font-mono ${badge.color} border rounded px-2 py-0.5`} - > - {badge.label} - </span> - <button - type="button" - onClick={onRefresh} - className="text-[10px] font-mono text-[#7788aa] hover:text-white" - title="Refresh" - > - [refresh] - </button> - </div> + <button + type="button" + onClick={onRefresh} + className="text-[10px] font-mono text-[#7788aa] hover:text-white shrink-0" + title="Refresh" + > + [refresh] + </button> </div> - {/* Type + Priority inline */} - <div className="flex items-center gap-3 mb-2"> - <span className={`text-[10px] font-mono ${currentType.color}`}> + {/* Metadata badges row */} + <div className="flex flex-wrap items-center gap-1.5"> + <span + className={`text-[10px] font-mono ${badge.color} border rounded px-1.5 py-0.5`} + > + {badge.label} + </span> + <span + className={`text-[10px] font-mono ${currentType.color} border border-current rounded px-1.5 py-0.5`} + > {currentType.label} </span> - <span className="text-[10px] font-mono text-[#2a3a5a]">/</span> - <span className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}> + <span + className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`} + > {currentPriority.label} </span> - </div> - - {/* Linked entities */} - {order.directiveId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1 truncate"> - Directive: <a href={`/directives/${order.directiveId}`} className="text-[#75aafc] hover:text-white underline"> - {order.directiveName || order.directiveId.slice(0, 8) + "..."} + {order.directiveId && ( + <a + href={`/directives/${order.directiveId}`} + className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 hover:text-white hover:border-[rgba(117,170,252,0.5)] truncate max-w-[160px]" + title={order.directiveName || order.directiveId} + > + ↗ {order.directiveName || order.directiveId.slice(0, 8) + "..."} </a> - </div> - )} - {order.directiveStepId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1 truncate"> - Step: <span className="text-[#7788aa]">{order.directiveStepId.slice(0, 8)}...</span> - </div> - )} - - {/* Controls */} - <div className="flex flex-wrap gap-2 mt-2"> + )} + {order.directiveStepId && ( + <span className="text-[10px] font-mono text-[#7788aa] border border-[#2a3a5a] rounded px-1.5 py-0.5"> + step:{order.directiveStepId.slice(0, 8)} + </span> + )} <button type="button" onClick={onDelete} - className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1 ml-auto" + className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-1.5 py-0.5 ml-auto" > Delete </button> |