github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-21 04:43:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sidebar): bound row bleed for horizontal scroll

Browse Source
This commit is contained in:
Melody Ruch
2026-09-05 22:27:32 +08:00
committed by GitHub
parent 7e06992f3b
commit 38df8e3097
2 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/sidebar/ConnectionTree.vue
+7
View File
@@ -2838,6 +2838,13 @@ defineExpose({ focusSearch, createNewGroup, collapseAllTreeNodes, locateTabInSid
scrollbar-width: none;
-ms-overflow-style: none;
overflow-anchor: none;
/* Lets TreeItem's full-bleed row/search-box backgrounds (see
tree-item-connection-tint / tree-table-search-control in TreeItem.vue)
size themselves off this scroller's own width via cqw instead of a
fixed -9999px offset, so they can't inflate this element's own
scrollWidth when sidebarAllowHorizontalScroll turns on overflow-x. */
container-type: inline-size;
container-name: sidebar-tree;
}
.connection-tree-scroller::-webkit-scrollbar {
apps/desktop/src/components/sidebar/TreeItem.vue
+18 -2
View File
@@ -1746,7 +1746,17 @@ function onKeydown(event: KeyboardEvent) {
.tree-item-connection-tint::before {
content: "";
position: absolute;
inset: 0 -9999px;
top: 0;
bottom: 0;
left: 0;
/* Bleed the tint to the sidebar scroller's own width (see container-type on
.connection-tree-scroller) rather than an unbounded -9999px, which used
to inflate the scroller's scrollWidth once sidebarAllowHorizontalScroll
turned on overflow-x (issue #8061). max() keeps the tint on rows wider
than the scroller; the plain % line is the fallback for engines that
drop cqw units. */
width: 100%;
width: max(100%, 100cqw);
z-index: 0;
background-color: var(--tree-connection-row-bg);
border-radius: inherit;
@@ -1801,7 +1811,13 @@ function onKeydown(event: KeyboardEvent) {
.tree-table-search-control::before {
content: "";
position: absolute;
inset: 0 -9999px;
top: 0;
bottom: 0;
left: 0;
/* See .tree-item-connection-tint::before above: bound to the scroller's
own width instead of -9999px so this can't inflate scrollWidth. */
width: 100%;
width: max(100%, 100cqw);
z-index: 0;
background-color: var(--tree-table-search-row-bg);
pointer-events: none;