Skip to content

Commit ebcbf8b

Browse files
AmirMohammad CheraghaliAmirMohammad Cheraghali
AmirMohammad Cheraghali
authored and
AmirMohammad Cheraghali
committed
Rebuild Layout & Engine section with explicit heights and proper proportions
1 parent 5d9c249 commit ebcbf8b

1 file changed

Lines changed: 32 additions & 32 deletions

File tree

‎src/components/Controls.tsx‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,70 +1073,70 @@ export const Controls: React.FC<ControlsProps> = ({
10731073

10741074
{/* Multi-View Mode Selector */}
10751075
{onSetViewMode && (
1076-
<div className="space-y-1" id="viewport-controls">
1076+
<div className="col-span-2 space-y-2" id="viewport-controls">
10771077
<label className={`text-[9px] font-bold uppercase tracking-wider block ${subtleText}`}>Layout & Engine</label>
1078-
<div className="grid grid-cols-[40%_60%] gap-2 w-full">
1078+
<div className="grid grid-cols-[1fr_2fr] gap-3">
10791079
{/* Column 1: Engine Switcher */}
1080-
<div className="flex flex-col gap-1 w-full">
1080+
<div className="flex flex-col gap-2">
10811081
<button
10821082
onClick={() => setVisualizerEngine?.('ngl')}
1083-
className={`flex-1 flex flex-col items-center justify-center rounded-lg border transition-all ${visualizerEngine === 'ngl' ? 'bg-indigo-600/10 border-indigo-500 text-indigo-500' : `${cardBg} border-neutral-700 opacity-60 hover:opacity-100`}`}
1084-
title="Use NGL Viewer"
1083+
className={`h-12 flex items-center justify-center rounded-lg border-2 font-bold text-sm transition-all ${visualizerEngine === 'ngl' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1084+
title="NGL Viewer"
10851085
>
1086-
<span className="text-[10px] font-bold">NGL</span>
1086+
NGL
10871087
</button>
10881088
<button
10891089
onClick={() => setVisualizerEngine?.('molstar')}
1090-
className={`flex-1 flex flex-col items-center justify-center rounded-lg border transition-all ${visualizerEngine === 'molstar' ? 'bg-indigo-600/10 border-indigo-500 text-indigo-500' : `${cardBg} border-neutral-700 opacity-60 hover:opacity-100`}`}
1091-
title="Use Mol* Viewer"
1090+
className={`h-12 flex items-center justify-center rounded-lg border-2 font-bold text-sm transition-all ${visualizerEngine === 'molstar' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1091+
title="Mol* Viewer"
10921092
>
1093-
<span className="text-[10px] font-bold">Mol*</span>
1093+
Mol*
10941094
</button>
10951095
</div>
10961096

10971097
{/* Column 2: Layout Grid */}
1098-
<div className="grid grid-cols-2 gap-1.5 w-full">
1098+
<div className="grid grid-cols-2 gap-2">
10991099
<button
11001100
onClick={() => onSetViewMode('single')}
1101-
className={`w-full flex flex-col items-center justify-center gap-0.5 px-1 py-1.5 rounded-lg border transition-all ${viewMode === 'single' ? 'bg-indigo-600/10 border-indigo-500 text-indigo-500' : `${cardBg} border-neutral-700 opacity-80 hover:opacity-100`}`}
1101+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border-2 transition-all ${viewMode === 'single' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
11021102
>
1103-
<div className="w-3 h-3 border rounded" />
1104-
<span className="text-[9px] font-medium whitespace-nowrap">Single</span>
1103+
<div className="w-4 h-4 border-2 rounded" />
1104+
<span className="text-[9px] font-bold">Single</span>
11051105
</button>
11061106
<button
11071107
onClick={() => onSetViewMode('dual')}
1108-
className={`w-full flex flex-col items-center justify-center gap-0.5 px-1 py-1.5 rounded-lg border transition-all ${viewMode === 'dual' ? 'bg-indigo-600/10 border-indigo-500 text-indigo-500' : `${cardBg} border-neutral-700 opacity-80 hover:opacity-100`}`}
1108+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border-2 transition-all ${viewMode === 'dual' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
11091109
>
1110-
<div className="flex gap-0.5">
1111-
<div className="w-1.5 h-3 border rounded" />
1112-
<div className="w-1.5 h-3 border rounded" />
1110+
<div className="flex gap-1">
1111+
<div className="w-2 h-4 border-2 rounded" />
1112+
<div className="w-2 h-4 border-2 rounded" />
11131113
</div>
1114-
<span className="text-[9px] font-medium whitespace-nowrap">Dual</span>
1114+
<span className="text-[9px] font-bold">Dual</span>
11151115
</button>
11161116
<button
11171117
onClick={() => onSetViewMode('triple')}
1118-
className={`w-full flex flex-col items-center justify-center gap-0.5 px-1 py-1.5 rounded-lg border transition-all ${viewMode === 'triple' ? 'bg-indigo-600/10 border-indigo-500 text-indigo-500' : `${cardBg} border-neutral-700 opacity-80 hover:opacity-100`}`}
1118+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border-2 transition-all ${viewMode === 'triple' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
11191119
>
1120-
<div className="flex flex-col gap-0.5">
1121-
<div className="w-3 h-1.5 border rounded" />
1122-
<div className="flex gap-0.5">
1123-
<div className="w-1.5 h-1.5 border rounded" />
1124-
<div className="w-1.5 h-1.5 border rounded" />
1120+
<div className="flex flex-col gap-1">
1121+
<div className="w-4 h-1.5 border-2 rounded" />
1122+
<div className="flex gap-1">
1123+
<div className="w-1.5 h-1.5 border-2 rounded" />
1124+
<div className="w-1.5 h-1.5 border-2 rounded" />
11251125
</div>
11261126
</div>
1127-
<span className="text-[9px] font-medium whitespace-nowrap">Triple</span>
1127+
<span className="text-[9px] font-bold">Triple</span>
11281128
</button>
11291129
<button
11301130
onClick={() => onSetViewMode('quad')}
1131-
className={`w-full flex flex-col items-center justify-center gap-0.5 px-1 py-1.5 rounded-lg border transition-all ${viewMode === 'quad' ? 'bg-indigo-600/10 border-indigo-500 text-indigo-500' : `${cardBg} border-neutral-700 opacity-80 hover:opacity-100`}`}
1131+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border-2 transition-all ${viewMode === 'quad' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
11321132
>
1133-
<div className="grid grid-cols-2 gap-0.5">
1134-
<div className="w-1.5 h-1.5 border rounded" />
1135-
<div className="w-1.5 h-1.5 border rounded" />
1136-
<div className="w-1.5 h-1.5 border rounded" />
1137-
<div className="w-1.5 h-1.5 border rounded" />
1133+
<div className="grid grid-cols-2 gap-1">
1134+
<div className="w-1.5 h-1.5 border-2 rounded" />
1135+
<div className="w-1.5 h-1.5 border-2 rounded" />
1136+
<div className="w-1.5 h-1.5 border-2 rounded" />
1137+
<div className="w-1.5 h-1.5 border-2 rounded" />
11381138
</div>
1139-
<span className="text-[9px] font-medium whitespace-nowrap">Quad</span>
1139+
<span className="text-[9px] font-bold">Quad</span>
11401140
</button>
11411141
</div>
11421142
</div>

0 commit comments

Comments
 (0)