fix(ui): improve left nav rail alignment and spacing

- Increase nav item padding from 4px to 10px horizontal (qss.py)
- Add left margin to toggle row so MENU button isn't flush against edge
- Balance head section margins for project picker and new chat button
- Add horizontal breathing room to scroll body containing nav items
- Double _NAV_ROW_INSET from 4 to 8 for better visual separation

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
thanhnv
2026-09-08 22:58:27 +09:00
co-authored by Claude Opus 5
parent ea5fadb72a
commit b746917f6f
3 changed files with 5 additions and 5 deletions
+3 -3
View File
@@ -81,7 +81,7 @@ class NavRailMixin:
# 16px icon up with the nav items' icons below (1px list frame + item # 16px icon up with the nav items' icons below (1px list frame + item
# padding) — same indent level, same icon size as e.g. Dashboard. # padding) — same indent level, same icon size as e.g. Dashboard.
toggle_row = QHBoxLayout() toggle_row = QHBoxLayout()
toggle_row.setContentsMargins(0, 8, 10, 8) toggle_row.setContentsMargins(10, 8, 10, 8)
toggle_row.addWidget(self._nav_toggle_btn, 0, Qt.AlignLeft) toggle_row.addWidget(self._nav_toggle_btn, 0, Qt.AlignLeft)
toggle_row.addStretch(1) toggle_row.addStretch(1)
nvl.addLayout(toggle_row) nvl.addLayout(toggle_row)
@@ -111,7 +111,7 @@ class NavRailMixin:
self.nav_project_btn.menu().aboutToShow.connect(self._fill_rail_project_menu) self.nav_project_btn.menu().aboutToShow.connect(self._fill_rail_project_menu)
self.nav_project_btn.setVisible(False) self.nav_project_btn.setVisible(False)
head = QVBoxLayout() head = QVBoxLayout()
head.setContentsMargins(6, 0, 6, 6) head.setContentsMargins(10, 0, 10, 6)
head.setSpacing(6) head.setSpacing(6)
head.addWidget(self.nav_project) head.addWidget(self.nav_project)
head.addWidget(self.nav_project_btn) head.addWidget(self.nav_project_btn)
@@ -136,7 +136,7 @@ class NavRailMixin:
self._nav_scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff) self._nav_scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
scroll_body = QWidget() scroll_body = QWidget()
sv = QVBoxLayout(scroll_body) sv = QVBoxLayout(scroll_body)
sv.setContentsMargins(0, 0, 0, 0) sv.setContentsMargins(6, 0, 6, 0)
sv.setSpacing(0) sv.setSpacing(0)
sv.addWidget(self.nav, 0) sv.addWidget(self.nav, 0)
# RECENTS — the threads of the project named in the picker above, right # RECENTS — the threads of the project named in the picker above, right
+1 -1
View File
@@ -13,7 +13,7 @@ from PySide6.QtWidgets import QStyledItemDelegate
# ---- kích thước --------------------------------------------------------- # ---- kích thước ---------------------------------------------------------
_NAV_EXPANDED_WIDTH = 150 _NAV_EXPANDED_WIDTH = 150
_NAV_COLLAPSED_WIDTH = 54 _NAV_COLLAPSED_WIDTH = 54
_NAV_ROW_INSET = 4 _NAV_ROW_INSET = 8
_NAV_ROW_GAP = 6 _NAV_ROW_GAP = 6
_NAV_MIN_WIDTH = 132 _NAV_MIN_WIDTH = 132
_NAV_MAX_SHARE = 0.22 _NAV_MAX_SHARE = 0.22
+1 -1
View File
@@ -45,7 +45,7 @@ QWidget#contentArea { background: $bg; }
carries a 2px accent marker, so which section you are in survives even at a carries a 2px accent marker, so which section you are in survives even at a
glance or for anyone who cannot separate the two greys. */ glance or for anyone who cannot separate the two greys. */
QWidget#navWrap QTreeWidget::item, QWidget#navWrap QListWidget::item { QWidget#navWrap QTreeWidget::item, QWidget#navWrap QListWidget::item {
padding: 6px 4px; border-radius: ${radius}px; padding: 6px 10px; border-radius: ${radius}px;
} }
QWidget#navWrap QTreeWidget::item:hover, QWidget#navWrap QListWidget::item:hover { QWidget#navWrap QTreeWidget::item:hover, QWidget#navWrap QListWidget::item:hover {
background: $nav_hover; background: $nav_hover;