fix(ui): Monitoring Overview now reads like the wireframe, and the rail stops overlapping

Two problems, both only visible at the window size this machine actually opens
(1024×571 on a 1280×672 work area):

  * The rail drew the "GẦN ĐÂY" heading on top of the last nav row. nav and the
    bottom group have fixed heights, so a short window put the entire squeeze on
    RECENTS; once that hit zero the layout had nowhere left to give. The
    destinations and RECENTS now scroll together inside their own area, while
    the bottom group, Settings and the account row stay pinned.

  * Overview did not look like the drawing. Fixed, in the order the page draws
    them: sections are quiet caps headings with flat content instead of six
    bordered boxes; the four resource metrics sit ACROSS one row rather than
    stacked four deep; and "Hoạt động gần đây" moved from second place to the
    bottom beside the audit log, so the reading order is cost → machine →
    permissions → prices → what happened. At 1280×760 the page now reaches the
    price table on first screen; before it showed one and a half sections.

Two deliberate differences from the drawing, both because matching it would
remove information: the wireframe shows four KPI tiles where the app has five
real metrics plus the budget entry card, and it writes resources as one text
line where the app keeps the CPU/RAM gauges.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app.py

@@ -10,8 +10,9 @@ from PySide6.QtCore import Qt, QTimer
 from PySide6.QtGui import QGuiApplication, QIcon
 from PySide6.QtWidgets import (
     QApplication, QComboBox, QHBoxLayout, QLabel, QMainWindow, QMenu,
-    QPushButton, QSizePolicy, QSplitter, QStackedWidget, QSystemTrayIcon,
-    QToolButton, QTreeWidget, QTreeWidgetItem, QVBoxLayout, QWidget,
+    QPushButton, QScrollArea, QSizePolicy, QSplitter, QStackedWidget,
+    QSystemTrayIcon, QToolButton, QTreeWidget, QTreeWidgetItem, QVBoxLayout,
+    QWidget,
 )
 
 from . import APP_NAME, DISPLAY_NAME, __version__
@@ -238,17 +239,36 @@ class MainWindow(QMainWindow):
         self.workspace.projects_changed.connect(self._sync_rail_project)
         self._syncing_rail_project = False
         self._sync_rail_project()
-        nvl.addWidget(self.nav, 0)
+        # The destinations and RECENTS scroll together; the bottom group, the
+        # Settings button and the account row stay pinned below them.
+        #
+        # Without this the rail simply ran out of room on a short window (a
+        # 1280×720 laptop leaves ~570px here): nav and the bottom group have
+        # fixed heights, so the squeeze fell entirely on RECENTS, and once that
+        # hit zero the layout drew the "GẦN ĐÂY" heading straight over the last
+        # nav row.
+        self._nav_scroll = QScrollArea()
+        self._nav_scroll.setObjectName("navScroll")
+        self._nav_scroll.setWidgetResizable(True)
+        self._nav_scroll.setFrameShape(QScrollArea.NoFrame)
+        self._nav_scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
+        scroll_body = QWidget()
+        sv = QVBoxLayout(scroll_body)
+        sv.setContentsMargins(0, 0, 0, 0)
+        sv.setSpacing(0)
+        sv.addWidget(self.nav, 0)
         # RECENTS — the threads of the project named in the picker above, right
         # where Claude puts them. A shortcut only: the full History panel (search,
         # filters, pin, bulk delete, context menu) stays exactly where it is, and
         # "all projects…" at the end of this list opens it.
         self.nav_recents_hdr = QLabel(tr("app.nav.recents"))
         self.nav_recents_hdr.setObjectName("navSectionHdr")
-        nvl.addWidget(self.nav_recents_hdr)
+        sv.addWidget(self.nav_recents_hdr)
         self.nav_recents = self._new_nav_tree("navRecents")
         self.nav_recents.itemClicked.connect(self._on_rail_recent)
-        nvl.addWidget(self.nav_recents, 1)
+        sv.addWidget(self.nav_recents, 1)
+        self._nav_scroll.setWidget(scroll_body)
+        nvl.addWidget(self._nav_scroll, 1)
         # Bottom-pinned group: the places you visit occasionally, kept out of the
         # way of the ones you live in. A hairline (styled via #navrailBottom in
         # theme.py) separates the two lists.