fix: make sidebar scrollable so training/predictions panels are always visible

src/app/page.tsx

@@ -760,7 +760,7 @@ export default function Home() {
       {/* Sidebar */}
       <div className="flex flex-col bg-sidebar border-r border-sidebar-border w-60 flex-shrink-0 animate-fade-in">
         {/* Sidebar Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-sidebar-border">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-sidebar-border flex-shrink-0">
           <div>
             <h1 className="text-sm font-semibold text-foreground tracking-tight">Candle Annotator</h1>
             <p className="text-[10px] text-muted-foreground">Chart annotation tool</p>
@@ -771,7 +771,7 @@ export default function Home() {
         </div>
 
         {/* Chart Selector */}
-        <div className="px-3 py-2 border-b border-sidebar-border">
+        <div className="px-3 py-2 border-b border-sidebar-border flex-shrink-0">
           <ChartSelector
             charts={charts}
             activeChartId={activeChartId}
@@ -781,12 +781,12 @@ export default function Home() {
         </div>
 
         {/* File Upload */}
-        <div className="px-3 py-2 border-b border-sidebar-border">
+        <div className="px-3 py-2 border-b border-sidebar-border flex-shrink-0">
           <FileUpload onUploadSuccess={handleUploadSuccess} />
         </div>
 
         {/* Toolbox */}
-        <div className="px-3 py-2 border-b border-sidebar-border">
+        <div className="px-3 py-2 border-b border-sidebar-border flex-shrink-0">
           <Toolbox
             activeTool={activeTool}
             onToolChange={setActiveTool}
@@ -806,28 +806,54 @@ export default function Home() {
           />
         </div>
 
-        {/* Annotations List - scrollable */}
-        <div className="flex-1 overflow-y-auto scrollbar-thin px-3 py-2 min-h-0">
-          <SpanAnnotationList
-            spanAnnotations={spanAnnotations}
-            spanLabelTypes={spanLabelTypes}
-            selectedSpanId={selectedSpanId}
-            onSelectSpan={handleSelectedSpanChange}
-            onDeleteSpan={handleDeleteSpan}
-          />
-        </div>
-
-        {/* TA-Lib Pattern Panel */}
-        <div className="px-3 py-2 border-t border-sidebar-border">
-          <TalibPatternPanel
-            activeChartId={activeChartId}
-            onAnnotationsChanged={() => fetchSpanAnnotations(activeChartId)}
-            getCandles={() => chartRef.current?.getVisibleCandles()}
-          />
+        {/* Scrollable middle: Annotations + TA-Lib + Training + Predictions */}
+        <div className="flex-1 overflow-y-auto scrollbar-thin min-h-0">
+          {/* Annotations List */}
+          <div className="px-3 py-2 border-b border-sidebar-border">
+            <SpanAnnotationList
+              spanAnnotations={spanAnnotations}
+              spanLabelTypes={spanLabelTypes}
+              selectedSpanId={selectedSpanId}
+              onSelectSpan={handleSelectedSpanChange}
+              onDeleteSpan={handleDeleteSpan}
+            />
+          </div>
+
+          {/* TA-Lib Pattern Panel */}
+          <div className="px-3 py-2 border-b border-sidebar-border">
+            <TalibPatternPanel
+              activeChartId={activeChartId}
+              onAnnotationsChanged={() => fetchSpanAnnotations(activeChartId)}
+              getCandles={() => chartRef.current?.getVisibleCandles()}
+            />
+          </div>
+
+          {/* Training Panel */}
+          <div className="px-3 py-2 border-b border-sidebar-border">
+            <TrainingPanel />
+          </div>
+
+          {/* Predictions */}
+          <div className="px-3 py-2">
+            <PredictionPanel
+              predictionState={predictionState}
+              onToggleVisibility={togglePredictionVisibility}
+              onFetchPredictions={handleFetchVisiblePredictions}
+              onFetchBatchPredictions={handleFetchBatchPredictions}
+              onConfidenceChange={setConfidenceThreshold}
+              onToggleLabelSelection={toggleLabelSelection}
+              predictionSummary={predictionSummary}
+              isModelOnline={isModelOnline}
+              showOnlyDisagreements={showOnlyDisagreements}
+              onToggleShowOnlyDisagreements={toggleShowOnlyDisagreements}
+              onModelLoaded={handleModelLoaded}
+            />
+          </div>
         </div>
 
+        {/* Fixed bottom actions */}
         {/* Delete all annotations */}
-        <div className="px-3 py-2 border-t border-sidebar-border">
+        <div className="px-3 py-2 border-t border-sidebar-border flex-shrink-0">
           <button
             onClick={handleDeleteAllAnnotations}
             disabled={!activeChartId}
@@ -837,30 +863,8 @@ export default function Home() {
           </button>
         </div>
 
-        {/* Training Panel */}
-        <div className="px-3 py-2 border-t border-sidebar-border">
-          <TrainingPanel />
-        </div>
-
-        {/* Predictions */}
-        <div className="px-3 py-2 border-t border-sidebar-border">
-          <PredictionPanel
-            predictionState={predictionState}
-            onToggleVisibility={togglePredictionVisibility}
-            onFetchPredictions={handleFetchVisiblePredictions}
-            onFetchBatchPredictions={handleFetchBatchPredictions}
-            onConfidenceChange={setConfidenceThreshold}
-            onToggleLabelSelection={toggleLabelSelection}
-            predictionSummary={predictionSummary}
-            isModelOnline={isModelOnline}
-            showOnlyDisagreements={showOnlyDisagreements}
-            onToggleShowOnlyDisagreements={toggleShowOnlyDisagreements}
-            onModelLoaded={handleModelLoaded}
-          />
-        </div>
-
         {/* Export */}
-        <div className="px-3 py-2 border-t border-sidebar-border">
+        <div className="px-3 py-2 border-t border-sidebar-border flex-shrink-0">
           <button
             onClick={handleExport}
             className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded bg-primary/10 hover:bg-primary/20 text-primary transition-colors"
@@ -871,7 +875,7 @@ export default function Home() {
         </div>
 
         {/* Settings */}
-        <div className="relative px-3 py-2 border-t border-sidebar-border">
+        <div className="relative px-3 py-2 border-t border-sidebar-border flex-shrink-0">
           <button
             onClick={() => setSettingsOpen((o) => !o)}
             className="flex items-center gap-1.5 px-2 py-1.5 text-xs rounded text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors"