refactor: Eliminate sidebar overlays - integrate Controls and SequenceTrack into flex layout

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -1545,6 +1545,19 @@ function App() {
             </div>
           </div>
         )}
+
+        {/* Right Sidebar: Sequence Track */}
+        <SequenceTrack
+          id="sequence-track"
+          chains={chains}
+          highlightedResidue={highlightedResidue}
+          onHoverResidue={() => { }}
+          onClickResidue={(chain, resNo) => viewerRef.current?.focusResidue(chain, resNo)}
+          onClickAtom={(serial) => viewerRef.current?.highlightAtom(serial)}
+          isLightMode={isLightMode}
+          coloring={coloring}
+          colorPalette={colorPalette}
+        />
       </div>
 
       <ContactMap
@@ -1609,17 +1622,7 @@ function App() {
         isLightMode={isLightMode}
       />
 
-      <SequenceTrack
-        id="sequence-track"
-        chains={chains}
-        highlightedResidue={highlightedResidue}
-        onHoverResidue={() => { }} // Hover disabled per user request
-        onClickResidue={(chain, resNo) => viewerRef.current?.focusResidue(chain, resNo)}
-        onClickAtom={(serial) => viewerRef.current?.highlightAtom(serial)}
-        isLightMode={isLightMode}
-        coloring={coloring}
-        colorPalette={colorPalette}
-      />
+
 
       <ToastContainer toasts={toasts} onRemove={removeToast} />
 

src/components/Controls.tsx

@@ -620,8 +620,8 @@ export const Controls: React.FC<ControlsProps> = ({
                 transition-transform duration-300 ease-in-out
                 flex flex-col
                 ${isMobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
-                md:translate-x-0 md:top-4 md:left-4 md:h-[calc(100vh-2rem)] md:rounded-xl md:z-10
-                ${isLightMode ? 'bg-white border-neutral-900 shadow-none' : 'bg-neutral-900/80 border-white/10 md:shadow-2xl'}
+                md:relative md:translate-x-0 md:h-full md:w-80 md:rounded-none md:z-10 md:shrink-0
+                ${isLightMode ? 'bg-white border-neutral-900 shadow-none' : 'bg-neutral-900/80 border-white/10 md:bg-neutral-900 md:shadow-none'}
             `}>
                 {/* Header - Fixed */}
                 <div className="flex-none p-4 pb-2 relative">

src/components/SequenceTrack.tsx

@@ -155,9 +155,9 @@ export const SequenceTrack: React.FC<SequenceTrackProps> = ({
     const isAtomView = activeChain.atoms && activeChain.atoms.length > 0;
 
     return (
-        <div id={id} className={`hidden md:flex fixed top-16 right-4 bottom-4 w-24 rounded-xl z-40 transition-transform duration-300 transform translate-x-0
-            ${isLightMode ? 'bg-white/90 border border-neutral-300 shadow-xl' : 'bg-black/60 border border-neutral-700 shadow-2xl'} 
-            backdrop-blur-md flex-col overflow-hidden`}>
+        <div id={id} className={`hidden md:flex relative h-full w-24 rounded-none shrink-0 z-10 border-l
+            ${isLightMode ? 'bg-white border-neutral-300' : 'bg-black/90 border-neutral-700'} 
+            flex-col overflow-hidden`}>
 
             {/* Header / Tabs - Compact Vertical */}
             <div className={`flex flex-col items-center pt-3 pb-2 gap-2 border-b ${isLightMode ? 'border-neutral-200 bg-white/50' : 'border-neutral-800 bg-black/50'} z-10 flex-shrink-0 backdrop-blur-md`}>