@hienlh/ppm 0.9.87 → 0.9.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/package.json +1 -1
  3. package/packages/ext-git-graph/src/webview-html.ts +29 -29
package/CHANGELOG.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.9.88] - 2026-04-15
4
+
5
+ ### Fixed
6
+ - **Git Graph spacing too large**: Reduced font sizes, row heights, padding, and column widths across toolbar, commit rows, detail panel, and all UI elements for a tighter, more compact layout.
7
+
3
8
  ## [0.9.87] - 2026-04-15
4
9
 
5
10
  ### Added
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hienlh/ppm",
3
- "version": "0.9.87",
3
+ "version": "0.9.89",
4
4
  "description": "Personal Project Manager — mobile-first web IDE with AI assistance",
5
5
  "author": "hienlh",
6
6
  "license": "MIT",
package/packages/ext-git-graph/src/webview-html.ts CHANGED
@@ -156,33 +156,33 @@ function getStyles(): string {
156
156
  --border: #27272a; --border2: #3f3f46; --selected: #1e293b; --surface-hover: #27272a;
157
157
  }
158
158
  }
159
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 13px; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
159
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 12px; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
160
160
  #app { display: flex; flex-direction: column; height: 100vh; }
161
161
 
162
162
  /* Toolbar */
163
- #toolbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
164
- .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 6px; }
165
- select { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 4px; padding: 4px 8px; font-size: 12px; }
166
- button { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; min-width: 28px; min-height: 28px; transition: background 0.15s, border-color 0.15s; }
163
+ #toolbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
164
+ .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 4px; }
165
+ select { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 4px; padding: 3px 6px; font-size: 11px; }
166
+ button { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 11px; cursor: pointer; min-width: 24px; min-height: 24px; transition: background 0.15s, border-color 0.15s; }
167
167
  button:hover { background: var(--surface-hover); border-color: var(--border2); }
168
168
  button:active { background: var(--surface); }
169
169
  .btn-fetching { opacity: 0.6; pointer-events: none; }
170
170
 
171
171
  /* Branch dropdown */
172
172
  .branch-dropdown { position: relative; }
173
- .branch-trigger { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 24px 4px 8px; font-size: 12px; cursor: pointer; min-width: 140px; text-align: left; position: relative; }
173
+ .branch-trigger { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 22px 3px 7px; font-size: 11px; cursor: pointer; min-width: 120px; text-align: left; position: relative; }
174
174
  .branch-trigger::after { content: '\\25BC'; font-size: 8px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--subtext); }
175
175
  .branch-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 220px; max-height: 300px; display: flex; flex-direction: column; margin-top: 2px; }
176
- .branch-filter-input { padding: 6px 8px; border: none; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; outline: none; border-radius: 6px 6px 0 0; }
176
+ .branch-filter-input { padding: 4px 7px; border: none; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 11px; outline: none; border-radius: 5px 5px 0 0; }
177
177
  .branch-list { overflow-y: auto; max-height: 250px; }
178
- .branch-option { padding: 6px 10px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 6px; }
178
+ .branch-option { padding: 4px 8px; cursor: pointer; font-size: 11px; display: flex; align-items: center; gap: 5px; }
179
179
  .branch-option:hover { background: var(--surface-hover); }
180
180
  .branch-option.selected { background: var(--selected); font-weight: 600; }
181
181
 
182
182
  /* Worktree popover */
183
183
  .worktree-dropdown { position: relative; }
184
- #btn-worktree { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 8px; }
185
- #btn-worktree .wt-count { background: var(--accent, #58a6ff); color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; }
184
+ #btn-worktree { display: flex; align-items: center; gap: 3px; font-size: 11px; padding: 3px 6px; }
185
+ #btn-worktree .wt-count { background: var(--accent, #58a6ff); color: #fff; font-size: 9px; border-radius: 7px; padding: 0 4px; min-width: 14px; text-align: center; line-height: 14px; }
186
186
  .worktree-popover { position: absolute; top: 100%; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); min-width: 300px; max-width: 400px; margin-top: 4px; display: flex; flex-direction: column; }
187
187
  .worktree-popover-header { padding: 8px 12px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
188
188
  .worktree-list { overflow-y: auto; max-height: 240px; }
@@ -204,8 +204,8 @@ button:active { background: var(--surface); }
204
204
 
205
205
  /* Stash popover */
206
206
  .stash-dropdown { position: relative; }
207
- #btn-stash { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 8px; }
208
- #btn-stash .stash-count { background: var(--accent, #58a6ff); color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; }
207
+ #btn-stash { display: flex; align-items: center; gap: 3px; font-size: 11px; padding: 3px 6px; }
208
+ #btn-stash .stash-count { background: var(--accent, #58a6ff); color: #fff; font-size: 9px; border-radius: 7px; padding: 0 4px; min-width: 14px; text-align: center; line-height: 14px; }
209
209
  .stash-popover { position: absolute; top: 100%; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); min-width: 300px; max-width: 400px; margin-top: 4px; display: flex; flex-direction: column; }
210
210
  .stash-popover-header { padding: 8px 12px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
211
211
  .stash-list { overflow-y: auto; max-height: 240px; }
@@ -234,18 +234,18 @@ button:active { background: var(--surface); }
234
234
  .file-status-U { color: var(--red); font-weight: bold; }
235
235
 
236
236
  /* Find bar */
237
- .find-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
238
- .find-bar input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 4px; padding: 4px 8px; font-size: 12px; }
237
+ .find-bar { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
238
+ .find-bar input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 4px; padding: 3px 6px; font-size: 11px; }
239
239
  .find-bar input:focus { outline: none; border-color: var(--blue); }
240
- #find-count { font-size: 11px; color: var(--subtext); min-width: 60px; }
240
+ #find-count { font-size: 10px; color: var(--subtext); min-width: 50px; }
241
241
  .hidden { display: none !important; }
242
242
 
243
243
  /* Graph container */
244
244
  #graph-container { flex: 1; overflow-y: auto; overflow-x: hidden; }
245
- .commit-row { display: flex; align-items: center; cursor: pointer; min-height: 28px; padding: 0 8px; }
245
+ .commit-row { display: flex; align-items: center; cursor: pointer; min-height: 24px; padding: 0 6px; font-size: 12px; }
246
246
  .commit-row:hover { background: var(--surface-hover); }
247
247
  .commit-row.selected { background: var(--selected); }
248
- .commit-row.header-row { background: var(--surface); cursor: default; font-weight: 600; font-size: 11px; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border); }
248
+ .commit-row.header-row { background: var(--surface); cursor: default; font-weight: 600; font-size: 10px; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border); min-height: 22px; }
249
249
  .commit-row.search-match { background: rgba(234, 179, 8, 0.15); }
250
250
  .commit-row.virtual { opacity: 0.85; font-style: italic; }
251
251
  .commit-row.virtual .col-message { color: var(--subtext); }
@@ -254,13 +254,13 @@ button:active { background: var(--surface); }
254
254
  .col-graph { width: var(--graph-col-w, 120px); min-width: var(--graph-col-w, 80px); overflow: hidden; flex-shrink: 0; position: relative; }
255
255
  .graph-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; background: transparent; }
256
256
  .graph-resize-handle:hover, .graph-resize-handle.dragging { background: var(--blue); opacity: 0.5; }
257
- .col-message { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
258
- .col-author { width: 120px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--subtext); font-size: 12px; }
259
- .col-date { width: 100px; min-width: 100px; color: var(--subtext); font-size: 12px; }
260
- .col-hash { width: 70px; min-width: 70px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; color: var(--subtle); }
257
+ .col-message { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
258
+ .col-author { width: 100px; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--subtext); font-size: 11px; }
259
+ .col-date { width: 80px; min-width: 80px; color: var(--subtext); font-size: 11px; }
260
+ .col-hash { width: 60px; min-width: 60px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10px; color: var(--subtle); }
261
261
 
262
262
  /* Ref badges */
263
- .ref-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-right: 4px; vertical-align: middle; }
263
+ .ref-badge { display: inline-block; padding: 0px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-right: 3px; vertical-align: middle; line-height: 16px; }
264
264
  .ref-head { background: var(--green); color: #fff; }
265
265
  .ref-local { background: var(--blue); color: #fff; }
266
266
  .ref-remote { background: var(--purple); color: #fff; }
@@ -277,14 +277,14 @@ button:active { background: var(--surface); }
277
277
  .commit-row.graph-hover { background: var(--surface-hover); }
278
278
 
279
279
  /* Detail panel */
280
- .detail-panel { border-top: 1px solid var(--border2); background: var(--surface); max-height: 40vh; overflow-y: auto; padding: 12px 16px; flex-shrink: 0; }
281
- .detail-panel h3 { font-size: 14px; margin-bottom: 8px; }
282
- .detail-field { margin-bottom: 4px; font-size: 12px; }
280
+ .detail-panel { border-top: 1px solid var(--border2); background: var(--surface); max-height: 40vh; overflow-y: auto; padding: 8px 12px; flex-shrink: 0; }
281
+ .detail-panel h3 { font-size: 13px; margin-bottom: 6px; }
282
+ .detail-field { margin-bottom: 3px; font-size: 11px; }
283
283
  .detail-field .label { color: var(--subtext); display: inline-block; width: 80px; }
284
- .detail-message { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px; margin: 8px 0; font-size: 12px; white-space: pre-wrap; font-family: 'SF Mono', 'Fira Code', monospace; }
284
+ .detail-message { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 6px; margin: 6px 0; font-size: 11px; white-space: pre-wrap; font-family: 'SF Mono', 'Fira Code', monospace; }
285
285
  .file-list { margin-top: 8px; }
286
- .file-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; }
287
- .file-status { display: inline-block; width: 16px; text-align: center; font-weight: 700; font-size: 11px; }
286
+ .file-item { display: flex; align-items: center; gap: 5px; padding: 1px 0; font-size: 11px; font-family: 'SF Mono', 'Fira Code', monospace; }
287
+ .file-status { display: inline-block; width: 14px; text-align: center; font-weight: 700; font-size: 10px; }
288
288
  .file-status-A { color: var(--green); }
289
289
  .file-status-M { color: var(--yellow); }
290
290
  .file-status-D { color: var(--red); }
@@ -401,7 +401,7 @@ const NULL_VERTEX_ID = -1;
401
401
  const GRAPH_COLORS = ['#4ec9b0','#569cd6','#c586c0','#ce9178','#dcdcaa','#4fc1ff','#d7ba7d','#9cdcfe','#b5cea8','#d16969'];
402
402
  const graphConfig = {
403
403
  colours: GRAPH_COLORS,
404
- grid: { x: 16, y: 28, offsetX: 8, offsetY: 14, expandY: 60 },
404
+ grid: { x: 16, y: 24, offsetX: 8, offsetY: 12, expandY: 60 },
405
405
  style: 'rounded'
406
406
  };
407
407