termweb-dashboard 0.3.0 → 0.3.1

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.
package/dist/index.html CHANGED
@@ -6,26 +6,26 @@
6
6
  <title>termweb-dashboard</title>
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
- html, body {
9
+ html {
10
10
  height: 100%;
11
- overflow: hidden;
12
11
  }
13
12
  body {
13
+ min-height: 100%;
14
14
  background: #1e1e1e;
15
15
  color: #cccccc;
16
16
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
17
17
  font-size: 13px;
18
- display: flex;
19
- flex-direction: column;
20
18
  }
21
19
  #header {
20
+ position: sticky;
21
+ top: 0;
22
22
  height: 36px;
23
- flex-shrink: 0;
24
23
  background: #252526;
25
24
  display: flex;
26
25
  align-items: center;
27
26
  padding: 0 16px;
28
27
  border-bottom: 1px solid #3c3c3c;
28
+ z-index: 100;
29
29
  }
30
30
  #header h1 { font-size: 14px; font-weight: 600; flex: 1; }
31
31
  #header .info { font-size: 11px; color: #888; }
@@ -41,13 +41,13 @@
41
41
  grid-template-columns: repeat(2, 1fr);
42
42
  gap: 16px;
43
43
  padding: 16px;
44
- min-height: min-content;
45
44
  }
46
45
  .card {
47
46
  background: #252526;
48
47
  border: 1px solid #3c3c3c;
49
48
  border-radius: 6px;
50
49
  padding: 16px;
50
+ min-height: 150px;
51
51
  }
52
52
  .card h2 {
53
53
  font-size: 12px;
@@ -153,7 +153,8 @@
153
153
  flex: 1;
154
154
  min-height: 0;
155
155
  padding: 16px;
156
- overflow: auto;
156
+ overflow-y: auto;
157
+ -webkit-overflow-scrolling: touch;
157
158
  }
158
159
  .detail-header {
159
160
  margin-bottom: 16px;
@@ -165,9 +166,11 @@
165
166
  }
166
167
  .detail-content {
167
168
  flex: 1;
168
- overflow: auto;
169
+ min-height: 0;
170
+ overflow-y: auto;
169
171
  display: flex;
170
172
  flex-direction: column;
173
+ gap: 8px;
171
174
  }
172
175
  .detail-chart {
173
176
  height: 200px;
@@ -369,8 +372,9 @@
369
372
 
370
373
  /* Bottom hints bar */
371
374
  #hints {
375
+ position: sticky;
376
+ bottom: 0;
372
377
  height: 32px;
373
- flex-shrink: 0;
374
378
  background: #252526;
375
379
  border-top: 1px solid #3c3c3c;
376
380
  display: flex;
@@ -379,6 +383,7 @@
379
383
  gap: 24px;
380
384
  font-size: 11px;
381
385
  color: #888;
386
+ z-index: 100;
382
387
  }
383
388
  #hints span {
384
389
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "termweb-dashboard",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Terminal-based system monitoring dashboard powered by termweb",
5
5
  "bin": {
6
6
  "termweb-dashboard": "bin/cli.js"