Mobile chain-detail layout: stack in portrait, wrap long content

Stack Chain Identifier and chain metadata vertically in portrait; give the
detail cards min-w-0 and wrap long sequences / experimental details / binders
so they no longer overflow their cards on narrow screens.

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

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

@@ -4,7 +4,7 @@
  */
 import React, { useState } from 'react';
 import { ChainMetadata } from '../../../types/protein';
-import { formatText, formatPH, formatTemperature, truncateText } from '../../../utils/format';
+import { formatText, formatPH, formatTemperature, truncateText } from '../../../utils/format';
 
 interface ExperimentalConditionsPanelProps {
   metadata: ChainMetadata | null;
@@ -89,12 +89,12 @@ const ExperimentalConditionsPanel: React.FC<ExperimentalConditionsPanelProps> =
           <dd className="text-sm font-semibold text-slate-900">{formattedTemp}</dd>
         </div>
 
-        <div className="flex justify-between items-center py-2 border-b border-slate-100">
+        <div className="py-2 border-b border-slate-100">
           {formattedDetails && (
-            <div className="experimental-item experimental-details">
+            <div className="experimental-item experimental-details min-w-0">
           <dt className="text-xs font-medium text-slate-500 uppercase tracking-wider">Details</dt>
           <dd className="text-sm font-semibold text-slate-900">
-                <div className="details-content">
+                <div className="details-content wrap-anywhere mt-1">
                   {showFullDetails ? formattedDetails : detailsPreview}
                 </div>
                 {hasLongDetails && (

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

@@ -275,8 +275,8 @@ export function ProteinDashboard() {
         <main className="space-y-6">
           {hasActiveChainSearch && activeChainMetadata ? (
             <>
-              {/* First Row: Search + Chain Information (left-right 3:7 split) */}
-              <div className="grid gap-6 items-stretch" style={{ gridTemplateColumns: 'minmax(0, 3fr) minmax(0, 7fr)' }}>
+              {/* First Row: Search + Chain Information (3:7 in landscape, stacked in portrait) */}
+              <div className="grid gap-6 items-stretch chain-detail-grid">
                 <section className="min-w-0 h-full border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
                   <FilterPanel
                     filterOptions={filterOptions}
@@ -304,18 +304,18 @@ export function ProteinDashboard() {
 
               {/* Second Row: Sequence, Experimental Conditions, Binders (3 columns, equal height) */}
               <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <div className="border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
+                <div className="min-w-0 border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
                   <ErrorBoundary componentName="Sequence Panel">
                     <SequencePanel metadata={activeChainMetadata} />
                   </ErrorBoundary>
                 </div>
-                <div className="border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
+                <div className="min-w-0 border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
                   <ErrorBoundary componentName="Experimental Conditions">
                     <ExperimentalConditionsPanel metadata={activeChainMetadata} />
                   </ErrorBoundary>
                 </div>
                 {activeChainMetadata.nonpolymer_entities && activeChainMetadata.nonpolymer_entities.length > 0 && (
-                  <div className="border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
+                  <div className="min-w-0 border border-gray-200 rounded-2xl p-6 bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
                     <ErrorBoundary componentName="Binders Panel">
                       <BindersPanel metadata={activeChainMetadata} />
                     </ErrorBoundary>

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

@@ -111,11 +111,11 @@ const SequencePanel: React.FC<SequencePanelProps> = ({ metadata, isLoading }) =>
       </div>
       
       {/* Sequence Display */}
-      <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 font-mono text-xs max-h-80 overflow-y-auto">
+      <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 font-mono text-xs max-h-80 overflow-y-auto overflow-x-hidden">
         {displayLines.map((line, idx) => (
           <div key={idx} className="flex mb-1 leading-relaxed">
-            <span className="text-gray-400 mr-4 min-w-[50px] text-right select-none">{idx * 60 + 1}</span>
-            <span className="text-gray-800 tracking-wide break-all">{line}</span>
+            <span className="text-gray-400 mr-4 min-w-[50px] shrink-0 text-right select-none">{idx * 60 + 1}</span>
+            <span className="text-gray-800 tracking-wide wrap-anywhere">{line}</span>
           </div>
         ))}
       </div>

frontend/src/index.css

@@ -3063,3 +3063,22 @@ body {
     display: none;
   }
 }
+
+/* Chain detail top row: Chain Identifier + Chain metadata side by side
+   (3:7) in landscape, stacked vertically in portrait (W < H). */
+.chain-detail-grid {
+  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
+}
+@media (orientation: portrait) {
+  .chain-detail-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* Let long unbroken content (amino-acid sequences, experimental details,
+   SMILES, binder names) wrap instead of overflowing its card. */
+.wrap-anywhere {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}