Chain metadata: keep each field's label+value together (inline break-inside)

The break-inside-avoid utility class is not in the vendored static
Tailwind CSS, so chain-metadata fields (e.g. Chain Composition) could
split label and value across columns. Add an inline breakInside style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/datasets/protein/ChainBasicInfoCards.tsx

@@ -70,14 +70,14 @@ const ChainBasicInfoCards: React.FC<ChainBasicInfoCardsProps> = ({ metadata, isL
 
       {/* Compact three-column metadata flow */}
       <div className="gap-4" style={{ columnCount: 3, columnGap: '1rem' }}>
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">Protein Name</div>
           <div className="text-sm font-semibold text-slate-900 font-mono" title={metadata?.entry?.title || ''}>
             {metadata?.entry?.title || '—'}
           </div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">PDB ID</div>
           <div className="text-sm font-semibold text-slate-900">
             <a 
@@ -92,32 +92,32 @@ const ChainBasicInfoCards: React.FC<ChainBasicInfoCardsProps> = ({ metadata, isL
           </div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">Chain ID</div>
           <div className="text-sm font-semibold text-slate-900 font-mono">{chainId || '—'}</div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">UniProt ID</div>
           <div className="text-sm font-semibold text-slate-900 font-mono">{getUniProtId()}</div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">Binding Status</div>
           <div className="text-sm font-semibold text-slate-900 capitalize">{metadata?.binding_status || '—'}</div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">Chain Composition</div>
           <div className="text-sm font-semibold text-slate-900 capitalize">{metadata?.chain_composition || '—'}</div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">CATH ID</div>
           <div className="text-sm font-semibold text-slate-900 font-mono">{metadata?.cath_id || 'uncategorized'}</div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">CATH Domain</div>
           <div className="text-sm font-semibold text-slate-900 font-mono">
             {metadata?.cath_superfamily ? (
@@ -134,7 +134,7 @@ const ChainBasicInfoCards: React.FC<ChainBasicInfoCardsProps> = ({ metadata, isL
           </div>
         </div>
 
-        <div className="break-inside-avoid mb-3">
+        <div className="break-inside-avoid mb-3" style={{ breakInside: 'avoid' }}>
           <div className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">State ID</div>
           <div className="text-sm font-semibold text-slate-900 font-mono">{metadata?.state_id || '—'}</div>
         </div>