Full document, spreadsheet, slideshow, and diagram tooling
fix(sheets): gradient fade, scrollbar gap, version badge overlap (#356)
+40
-22
+8
CHANGELOG.md
+8
CHANGELOG.md
···
7
7
8
8
## [Unreleased]
9
9
10
+
## [0.30.2] — 2026-04-10
11
+
12
+
### Fixed
13
+
- Sheets: sticky "+" add-sheet button now has a smooth gradient fade instead of a hard-edged shadow, so tabs visibly slide under it cleanly (#602)
14
+
- Sheets: version badge no longer overlaps the sheet-tabs strip — bumped above the tab strip in sheets view via `:has()` selector (#602)
15
+
- Sheets: grid scrollbar no longer leaves a "gap" around the thumb — dropped to 6px with no transparent border so the thumb fills the full track (#602)
16
+
- Sheets: sheet-tabs scrollbar matches the grid at 6px for visual parity (#602)
17
+
10
18
## [0.30.1] — 2026-04-10
11
19
12
20
### Changed
+1
-1
package.json
+1
-1
package.json
+31
-21
src/css/app.css
+31
-21
src/css/app.css
···
2239
2239
}
2240
2240
}
2241
2241
2242
-
/* WebKit scrollbar styling */
2242
+
/* WebKit scrollbar styling — matches .sheet-tabs. Thin thumb that fills
2243
+
the full track width, so there's no gap around the visible scrollbar. */
2243
2244
.sheet-container::-webkit-scrollbar {
2244
-
width: 8px;
2245
-
height: 8px;
2245
+
width: 6px;
2246
+
height: 6px;
2246
2247
}
2247
2248
2248
2249
.sheet-container::-webkit-scrollbar-track {
···
2252
2253
.sheet-container::-webkit-scrollbar-thumb {
2253
2254
background: #bbb7b0;
2254
2255
background: oklch(0.78 0.01 75);
2255
-
border-radius: 4px;
2256
-
border: 2px solid transparent;
2257
-
background-clip: padding-box;
2256
+
border-radius: 3px;
2258
2257
}
2259
2258
2260
2259
.sheet-container::-webkit-scrollbar-thumb:hover {
2261
2260
background: #9c9792;
2262
2261
background: oklch(0.68 0.01 75);
2263
-
background-clip: padding-box;
2264
2262
}
2265
2263
2266
2264
[data-theme="dark"] .sheet-container::-webkit-scrollbar-thumb {
2267
2265
background: #3e3a35;
2268
2266
background: oklch(0.35 0.01 75);
2269
-
background-clip: padding-box;
2270
2267
}
2271
2268
2272
2269
[data-theme="dark"] .sheet-container::-webkit-scrollbar-thumb:hover {
2273
2270
background: #59554f;
2274
2271
background: oklch(0.45 0.01 75);
2275
-
background-clip: padding-box;
2276
2272
}
2277
2273
2278
2274
.sheet-container::-webkit-scrollbar-corner {
···
3074
3070
}
3075
3071
}
3076
3072
3077
-
/* Match the sheet-container scrollbar so both strips feel uniform */
3073
+
/* Thin scrollbar matched to .sheet-container — no transparent border so
3074
+
the thumb fills the track, no "gappy" look. */
3078
3075
.sheet-tabs::-webkit-scrollbar {
3079
-
height: 8px;
3076
+
height: 6px;
3080
3077
}
3081
3078
.sheet-tabs::-webkit-scrollbar-track {
3082
3079
background: transparent;
3083
3080
}
3084
3081
.sheet-tabs::-webkit-scrollbar-thumb {
3085
3082
background: oklch(0.78 0.01 75);
3086
-
border-radius: 4px;
3087
-
border: 2px solid transparent;
3088
-
background-clip: padding-box;
3083
+
border-radius: 3px;
3089
3084
}
3090
3085
.sheet-tabs::-webkit-scrollbar-thumb:hover {
3091
3086
background: oklch(0.68 0.01 75);
3092
-
background-clip: padding-box;
3093
3087
}
3094
3088
[data-theme="dark"] .sheet-tabs::-webkit-scrollbar-thumb {
3095
3089
background: oklch(0.35 0.01 75);
3096
-
background-clip: padding-box;
3097
3090
}
3098
3091
[data-theme="dark"] .sheet-tabs::-webkit-scrollbar-thumb:hover {
3099
3092
background: oklch(0.45 0.01 75);
3100
-
background-clip: padding-box;
3101
3093
}
3102
3094
.sheet-tabs::-webkit-scrollbar-corner {
3103
3095
background: transparent;
···
3154
3146
}
3155
3147
3156
3148
/* Sticky "add sheet" button — stays pinned to the right edge of the
3157
-
visible strip even while the tab list is scrolled. A small inset
3158
-
shadow on the left visually separates it from tabs scrolling past. */
3149
+
visible strip even while the tab list is scrolled. Uses a ::before
3150
+
gradient to softly fade tabs out as they scroll underneath, instead
3151
+
of hard-stopping at a box-shadow edge. */
3159
3152
.sheet-tab-add {
3160
3153
position: sticky;
3161
3154
right: 0;
···
3170
3163
cursor: pointer;
3171
3164
border-radius: var(--radius-sm);
3172
3165
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
3173
-
/* Fade tabs out as they scroll under the sticky add button */
3174
-
box-shadow: -12px 0 12px -8px var(--color-surface);
3166
+
}
3167
+
.sheet-tab-add::before {
3168
+
content: '';
3169
+
position: absolute;
3170
+
top: 0;
3171
+
bottom: 0;
3172
+
right: 100%;
3173
+
width: 24px;
3174
+
pointer-events: none;
3175
+
background: linear-gradient(to right, transparent, var(--color-surface));
3175
3176
}
3176
3177
.sheet-tab-add:hover {
3177
3178
background: var(--color-hover);
3178
3179
color: var(--color-text);
3179
3180
border-color: var(--color-border);
3181
+
}
3182
+
.sheet-tab-add:hover::before {
3183
+
background: linear-gradient(to right, transparent, var(--color-hover));
3180
3184
}
3181
3185
3182
3186
/* Sheet tab color bar — colored underline indicator */
···
7802
7806
pointer-events: none;
7803
7807
z-index: var(--z-float);
7804
7808
user-select: none;
7809
+
}
7810
+
7811
+
/* Apps with a bottom UI strip (sheets tab strip, etc.) push the version
7812
+
badge above that strip so it doesn't overlap. */
7813
+
body:has(.sheets-app) .version-badge {
7814
+
bottom: 3rem;
7805
7815
}
7806
7816
7807
7817
/* ── AI Chat Sidebar ─────────────────────────────────────────────────── */