fix: Add text truncation to viewport headers to prevent overflow

- Added truncate class to viewport title text
- Added flex-1 min-w-0 to parent container for proper truncation
- Long structure names now show ellipsis (...) instead of overflowing
- Works correctly on mobile and in multi-view modes

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -1441,8 +1441,8 @@ function App() {
                           {viewportLabels[index]}
                         </span>
                       </div>
-                      <div className="flex items-center gap-3">
-                        <span className="text-[10px] text-neutral-400 font-mono flex-1 text-center">
+                      <div className="flex items-center gap-3 flex-1 min-w-0">
+                        <span className="text-[10px] text-neutral-400 font-mono truncate max-w-full">
                           {ctrl.proteinTitle || ctrl.pdbId || (ctrl.file ? ctrl.file.name : "No Structure")}
                         </span>
                         <button