Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

refactor(shell): a live sidebar drag leaves the docked inspector's width stale

Đang mở
  • Có gì không ổn?
#598 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
typescript
Lĩnh vực
frontend, testing-qa

Hướng nghiên cứu

Bắt đầu trong src/ui/app-shell.ts, quanh dragCtx.apply và logic reclamp hiện có của inspector, sau đó kiểm tra src/ui/splitters.ts và các bài kiểm thử sidebar hiện có. Trước tiên, chạy bài kiểm thử trình duyệt liên quan và bổ sung coverage cho việc kéo .col-resize trong khi inspector vẫn mở. Hoàn tất khi phần trung tâm tuân thủ CENTRE_MIN_PX, tùy chọn rightInspectorPx đã lưu không thay đổi và tất cả các kiểm tra npm được liệt kê đều đạt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

inbox refactor

Surfaced by ChatGPT review pass 2 of PR #596 (#586, phase 1 of #593), verified against the code.
Deliberately not fixed in #586 — see "Why deferred".

What

#586 made the docked inspector's displayed width dock-aware: its ceiling reserves
CENTRE_MIN_PX for the centre surface plus reservedPx = state.sidebarPx + 2 * HANDLE_PX
(src/ui/app-shell.ts:174). The re-clamp (app.dom.reclampInspectorWidth) runs at three moments:

  1. shell construction (app-shell.ts:252),
  2. inspector unfold (called from showInInspector),
  3. window resize.

A live left-sidebar drag is not one of them. dragCtx.apply (src/ui/app-shell.ts:182-186)
handles the 'col' axis by setting sidebar.style.width only:

apply: (axis, value) => {
  if (axis === 'col') sidebar.style.width = value + 'px';
  else if (axis === 'rightInspector') inspectorHost.style.width = value + 'px';
  else schemaPane.style.height = value + '%';
},

So while both panels are visible, widening the sidebar silently invalidates the reservation the
inspector's width was chosen against.

Reproduction

At a 1280px viewport:

  1. Open Cell, Rows or Reference and size the inspector to 600px (default sidebar 248px →
    reservedPx 262 → centre ≈ 418px).
  2. Drag .col-resize to the sidebar's maximum 420px (dragValue's clamp(ev.clientX, 180, 420),
    src/ui/splitters.ts:108) → reservedPx becomes 434.
  3. The inspector stays 600px, so the centre falls to ≈ 246px — below CENTRE_MIN_PX (320) — and
    stays there until an unrelated window resize or a fold/unfold happens to re-clamp it.

Why the existing tests miss it

Both new tests avoid the live transition:

  • the e2e sidebar test closes the inspector, changes the sidebar, then reopens it (so the unfold
    hook does the work);
  • the unit test changes state.sidebarPx while the inspector is folded.

Neither drags the sidebar while the inspector is open, which is the only path that exposes this.

Why deferred

It is a small, self-contained fix, but it shares a root cause with the centre-minimum policy
question (filed separately): both are about what the shell does when the row's three columns
cannot all keep their minima. Fixing the re-clamp alone would keep the centre at
CENTRE_MIN_PX only while that is feasible, so the two are best resolved together. It is also
not a regression — pre-#586 the surface was a position: fixed overlay that the sidebar's width
did not interact with at all.

Acceptance

  • The 'col' apply path re-clamps the displayed inspector width, without mutating the
    saved rightInspectorPx preference (the same displayed-vs-preferred split #586 established).
  • A real-browser test drags .col-resize while the inspector stays open and asserts the
    centre against CENTRE_MIN_PX. happy-dom evaluates no CSS layout, so a unit test cannot
    stand in for this.
  • npm test, npm run check:types, npm run check:arch, npm run build pass.
Ngôn ngữ chính
TypeScript
Star
8
Fork
2
Merge trung bình
1 giờ 17 phút
Pull request đã merge (30 ngày)
3

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Altinity/altinity-sql-browser

Tất cả issue của Altinity/altinity-sql-browser

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.